/* Theme Name: Csonkagroup Theme URI: http://www.csonkaglas.com Description: A Csonka és Fiai Kft (Csonkagroup) weboldalának alapértelmezett sablonja. Author: Effix-marketing Kft. Author URI: https://effix.hu Version: 1.0 */ *{ margin: 0; padding: 0; border: 0; text-decoration: none; } *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { max-width: 2000px; margin: auto; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; font-weight: 400; color: #333; line-height: 30px; overflow-x: hidden; } body.category { background: #f5f5f5; } body.rwd_menu__opened { overflow: none; } textarea, input, select, button { font-family: 'Source Sans Pro', sans-serif; font-size: 15px; 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; } /* 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: #f1655c; } .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; } .anim_slide_left { left: -10%; position: relative; opacity: 0; } .reveal .anim_slide_left { left: 0; opacity: 1; } .anim_slide_right { right: -10%; position: relative; opacity: 0; } .reveal .anim_slide_right { right: 0; opacity: 1; } /* Cols */ .row { font-size: 0; } .row .col { font-size: 18px; vertical-align: top; display: inline-block; } .row .col_50 { width: 50%; } .row .col_33 { width: 33.3333333333%; } .row .col_25 { width: 25%; } .row .col_20 { width: 20%; } .row.row_table { width: 100%; display: table; table-layout: fixed; } .row.row_table .col { display: table-cell; } /* Animation */ .anim, #header ul.menu li a:after, #video_slider .read_more:before, ul.menu li ul li a:before, .title:after, .button:before { -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); } .anim_cubic_long { -webkit-transition: all 4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 4s cubic-bezier(0.19, 1, 0.22, 1); transition: all 4s cubic-bezier(0.19, 1, 0.22, 1); } /* Button */ .button { height: 50px; padding: 0 20px; font-size: 18px !important; font-weight: 700; text-decoration: none !important; text-align: center; color: #0a366c !important; line-height: 48px; background: transparent; border: 1px solid #ddd; display: inline-block; position: relative; z-index: 0; 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; } .button:before { width: 100%; height: 0; left: 0; bottom: 0; background: #0a366c; position: absolute; content: ''; z-index: -1; } .button:hover { color: white !important; border-color: #0a366c; } .button:hover:before { height: 100%; } .button:disabled, .button:disabled:hover { color: #999 !important; background-color: #f5f5f5; border-color: #ddd; } .button.button_small { height: 30px; padding: 0 15px; font-size: 15px !important; line-height: 26px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .button_green { color: #0a366c !important; border-color: #bde145; } .button_green:hover { color: white !important; background: #bde145; border-color: #bde145; } .button_fullwidth { height: auto; padding: 15px 10px; text-align: center; line-height: 20px; display: block; } /* 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: #bde145; 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: #bde145; 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; } /* ------------------- NAVIGATION ------------------- */ #rwd_menu { width: 100%; left: 0; top: 80px; bottom: 0; font-size: 18px; color: white; background: #0a366c; position: fixed; z-index: 100; visibility: hidden; opacity: 0; overflow: hidden; } #rwd_menu :before, #rwd_menu :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; } #rwd_menu .rwd_menu_overlay { width: 100%; height: 100%; left: 0; top: 0; position: absolute; overflow-y: auto; } /* Main menu */ #rwd_menu ul.main_menu { margin-bottom: 30px; } #rwd_menu ul.main_menu li { border-bottom: 1px solid white; list-style: none; } #rwd_menu ul.main_menu li a { padding: 25px 0 25px 20px; font-size: 17px; font-weight: 700; color: white; line-height: 1; letter-spacing: 1px; display: block; position: relative; } #rwd_menu ul.main_menu li.menu-item-has-children > a:before { width: 0; height: 100%; left: 0; top: 0; background: #bde145; position: absolute; content: ''; } #rwd_menu ul.main_menu li.menu-item-has-children.menu-item.menu-item-52 > a:before { background: #f3c21d; } #rwd_menu ul.main_menu li.menu-item-has-children > a:after { width: 22px; height: 22px; right: 20px; top: 22px; background: url(images/icon_arrow_down_white.svg) no-repeat right center; background-size: cover; position: absolute; content: ''; } #rwd_menu ul.main_menu li.menu-item-has-children.open > a:before { width: 8px; } #rwd_menu ul.main_menu li.menu-item-has-children.open > a:after { ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #rwd_menu ul.main_menu li ul { background: white; display: none; } #rwd_menu ul.main_menu li ul li { border-bottom-color: rgba(0,0,0,0.3); } #rwd_menu ul.main_menu li ul li:last-child { border-bottom: none; } #rwd_menu ul.main_menu li ul li a { padding: 20px 0 20px 20px; font-size: 17px; color: #222; line-height: 20px; } #rwd_menu ul.main_menu li ul li > a:after { width: 22px !important; height: 22px !important; top: 19px !important; } #rwd_menu ul.main_menu li ul li.open > a:before { display: none; } #rwd_menu ul.main_menu li ul li ul { padding-bottom: 20px; } #rwd_menu ul.main_menu li ul li ul li { border-bottom: none; } #rwd_menu ul.main_menu li ul li ul li a { padding: 5px 10px 5px 30px; font-size: 18px; text-transform: none; text-decoration: none !important; color: #d0a362 !important; } #rwd_menu ul.main_menu li ul li ul li a:hover { color: white !important; } #rwd_menu ul.main_menu li ul li ul li.current_page_item a { color: white !important; } /* Other menu */ #rwd_menu ul.footer_menu { margin-bottom: 20px; } #rwd_menu ul.footer_menu li { padding: 0 20px; } #rwd_menu ul.footer_menu li a { padding: 8px 0; font-size: 16px; font-weight: 700; color: white; line-height: 20px; letter-spacing: 1px; display: inline-block; } /* Contact */ #rwd_menu .contact { margin: 0 20px 20px; border: 1px solid white; } #rwd_menu .contact a.meta_box { height: 70px; padding-left: 20px; font-size: 18px; font-weight: 700; color: white; line-height: 70px; letter-spacing: 1px; border-bottom: 1px solid white; display: block; position: relative; } #rwd_menu .contact a.meta_box:hover { background: #005d60; } #rwd_menu .contact a.meta_box:last-child { border-bottom: none; } #rwd_menu .contact a.meta_box:after { width: 70px; height: 100%; right: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: auto 30px; border-left: 1px solid white; position: absolute; content: ''; } #rwd_menu .contact a.meta_box.address:after { background-image: url(images/icon_marker_white.svg); } #rwd_menu .contact a.meta_box.email:after { background-image: url(images/icon_email_white.svg); } /* Language chooser */ #rwd_menu ul.language-chooser { margin: 0 20px 20px; border: 1px solid white; display: flex; list-style: none; } #rwd_menu ul.language-chooser li { width: 33.3333333333%; padding: 10px; text-align: center; border-right: 1px solid white; } #rwd_menu ul.language-chooser li img { margin-right: 10px; } #rwd_menu ul.language-chooser li a { color: white; } /* RWD nav opened */ body.rwd_menu__opened #rwd_menu { visibility: visible; opacity: 1; } /* -------------- HEADER -------------- */ #header { width: 100%; height: 90px; left: 0; top: 0; background: white; position: fixed; z-index: 100; } #header .inner { max-width: none; height: 100%; padding-left: 50px; padding-right: 50px; } #header .left, #header .right { height: 100%; } #header .right_panel { right: 0; top: 0; padding-right: 50px; position: absolute; } /* Logo */ #header .logo { width: auto; height: 40px; display: inline-block; } #header .logo img { width: auto; height: 100%; display: block; } /* Quote */ #header .quote { height: 50px; margin-left: 30px; padding-left: 30px; font-size: 16px; color: #777; line-height: 20px; border-left: 1px solid #ddd; } #header .quote .quote_author { font-size: 14px; color: #999; } /* Search */ #header .search { width: 70px; height: 50px; margin-left: 30px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; position: relative; overflow: hidden; } #header .search a { width: 70px; height: 100%; right: 0; top: 0; background: white url(images/icon_search.svg) no-repeat center; background-size: auto 24px; position: absolute; } #header .search input[type=text] { width: 100%; height: 100%; padding-left: 10px; font-size: 17px; } #header .search.active { width: 300px; } #header .search.active a { background-image: url(images/icon_close.svg); } /* Menu */ #header ul.menu { height: 40px; top: 25px; font-size: 0; position: relative; } #header ul.menu li { height: 100%; margin-left: 30px; vertical-align: top; display: inline-block; position: relative; } #header ul.menu li a { font-size: 20px; font-weight: 700; color: #0a366c; line-height: 40px; display: block; } #header ul.menu li a:after { width: 0; height: 3px; left: 0; bottom: 0; background: #bde145; position: absolute; content: ''; } #header ul.menu li:nth-child(2) a:after { background: #f3c21d; } #header ul.menu li:nth-child(3) a:after { background: #00bdcc; } #header ul.menu li a:hover:after { width: 100%; } #header ul.menu li.current_page_item a:after, #header ul.menu li.current_page_parent a:after { width: 100%; } #header ul.menu li ul { width: max-content; left: 0; top: 100%; background: white; position: absolute; visibility: hidden; z-index: 10; opacity: 0; -moz-box-shadow: 1px 3px 5px rgba(0,0,0,0.15); -webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.15); box-shadow: 1px 3px 5px rgba(0,0,0,0.15); } #header ul.menu li ul li { margin-left: 0; border-bottom: 1px solid #ddd; display: block; } #header ul.menu li ul li:last-child { border-bottom: none; } #header ul.menu li ul li a { padding: 10px 5px 10px 15px; font-size: 18px; font-weight: normal; line-height: 20px; position: relative; } #header ul.menu li ul li a:before { width: 0; height: 100%; left: 0; top: 0; background: #bde145; position: absolute; content: ''; } #header ul.menu li ul li a:hover:before { width: 5px; } #header ul.menu li:nth-child(2) ul li a:before { background: #f3c21d; } #header ul.menu li ul li a:after { display: none; } #header ul.menu li.menu-item-has-children:hover a:after { width: 100%; } #header ul.menu li.menu-item-has-children:hover ul { visibility: visible; opacity: 1; } /* Language switcher */ #header .language_selector { height: 40px; top: 25px; margin-left: 30px; position: relative; } #header .language_selector ul { width: 75px; height: 40px; padding-top: 40px; font-size: 0; background: white; overflow: hidden; list-style: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -moz-box-shadow: 0 0 20px rgba(0,0,0,0.15); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.15); box-shadow: 0 0 20px rgba(0,0,0,0.15); } #header .language_selector ul li { height: 40px; padding-left: 15px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #0a366c; line-height: 40px; border-bottom: 1px solid transparent; } #header .language_selector ul li:last-child { border-bottom: none; } #header .language_selector ul li.active { width: 100%; left: 0; top: 0; position: absolute; } #header .language_selector ul li a { color: #0a366c; } #header .language_selector ul li a:hover { text-decoration: underline; } #header .language_selector ul li img { margin-right: 5px; } #header .language_selector:hover ul { height: auto; -moz-box-shadow: 0 0 20px rgba(0,0,0,0.20); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.20); box-shadow: 0 0 20px rgba(0,0,0,0.20); } #header .language_selector:hover ul li { border-bottom-color: #ddd; } /* RWD menu */ #header .rwd_button { width: 80px; height: 80px; right: 0; top: 0; background: #0a366c; position: absolute; cursor: pointer; } #header .rwd_button .burg { width: 30px; height: 2px; left: 25px; top: 50%; background: white; 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: 30px; 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: -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); } /* Fixed header */ body.fixed_header #header { width: 100%; left: 0; top: 0; position: fixed; z-index: 100; -moz-box-shadow: 0 0 20px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2); box-shadow: 0 0 20px rgba(0,0,0,0.2); } body.fixed_header #header .header_top { display: none; } body.fixed_header #header .header_bottom { height: 80px; } body.fixed_header #header .header_bottom .logo { height: 50px; padding-left: 50px; } body.fixed_header #header .header_bottom ul.main_menu li a { line-height: 80px; } /* -------------------- VIDEO SLIDER -------------------- */ video::-webkit-media-controls { display: none !important; } #video_slider { height: 100vh; height: calc(100vh - 90px); background: #0a366c; display: flex; } #video_slider .video { width: 50%; height: 100%; background-color: #111; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; overflow: hidden; } #video_slider .video video { width: 101%; height: 100%; display: block; object-fit: cover; } #video_slider .video .read_more { left: 50px; bottom: 50px; padding: 15px 30px; font-size: 30px; color: #0a366c; line-height: 1; background: rgba(255,255,255,0.9); position: absolute; z-index: 1; } #video_slider .video .read_more:hover { color: white; } #video_slider .video .read_more:before { width: 0; height: 100%; left: 0; top: 0; background: #0a366c; position: absolute; content: ''; z-index: -1; } #video_slider .video .read_more:hover:before { width: 100%; } #video_slider.video_left_active .video.video_left { width: 80%; } #video_slider.video_left_active .video.video_right { width: 20%; } #video_slider.video_left_active .video.video_right .read_more { opacity: 0; } #video_slider.video_right_active .video.video_left { width: 20%; } #video_slider.video_right_active .video.video_left .read_more { opacity: 0; } #video_slider.video_right_active .video.video_right { width: 80%; } /* ------------- BOXES ------------- */ .boxes { padding: 50px 0; } .boxes:first-of-type { padding-top: 100px; } .boxes .box { height: 60vh; display: flex; flex-wrap: wrap; position: relative; } /* Content */ .boxes .box .content { width: 600px; height: 100%; left: -10%; padding: 0 50px; text-align: right; position: relative; opacity: 0; } .boxes .box .content .title { margin-bottom: 30px; padding-bottom: 30px; font-size: 60px; color: #0a366c; line-height: 1; position: relative; } .boxes .box .content .title:after { width: 50px; height: 3px; right: 0; bottom: 0; background: #bde145; position: absolute; content: ''; } .boxes .box .content:hover .title:after { width: 100px; } .boxes .box .content .title a { color: #0a366c; } .boxes .box .content ul { list-style: none; } .boxes .box .content ul li a { font-size: 19px; color: #0a366c; line-height: 20px; } .boxes .box .content ul li a:hover { text-decoration: underline; } /* Image */ .boxes .box .image { width: calc(100% - 600px); height: 100%; left: 10%; background-color: #111; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; opacity: 0; -moz-box-shadow: -20px 20px 0 #f5f5f5; -webkit-box-shadow: -20px 20px 0 #f5f5f5; box-shadow: -20px 20px 0 #f5f5f5; } /* Inverse */ .boxes:nth-child(odd) .box .content { left: 10%; text-align: left; order: 2; } .boxes:nth-child(odd) .box .content .title:after { right: auto; left: 0; } .boxes:nth-child(odd) .box .image { left: -10%; order: 1; } /* Products box */ .boxes:nth-child(3) .box .content .title:after { background: #f3c21d; } /* Animation */ .boxes .box.reveal .content, .boxes .box.reveal .image { left: 0; opacity: 1; } /* -------------- VIDEOS -------------- */ #videos { padding: 100px 0; background: #f5f5f5; border-bottom: 1px solid #ddd; } #videos .title { margin-bottom: 50px; padding-bottom: 30px; font-size: 60px; color: #0a366c; line-height: 1; position: relative; } #videos .title:after { width: 50px; height: 3px; left: 50%; bottom: 0; background: #00bdcc; position: absolute; content: ''; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #videos:hover .title:after { width: 100px; } .mgl_tubelab { margin-bottom: 30px; background: transparent !important; } .mgl_tubelab .mgl_tubelab_banner { display: none !important; } .mgl_tubelab .mgl_tubelab_channel_playlist_nav { display: none !important; } .mgl_tubelab .mgl_tubelab_channel_playlists { padding: 0 !important; } /* ------------ BLOG ------------ */ .blog { padding: 100px 0; background: #f5f5f5; } .blog .title { margin-bottom: 50px; padding-bottom: 30px; font-size: 60px; color: #0a366c; line-height: 1; position: relative; } .blog .title:after { width: 50px; height: 3px; left: 50%; bottom: 0; background: #00bdcc; position: absolute; content: ''; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .blog:hover .title:after { width: 100px; } .news { margin-left: -15px; margin-right: -15px; font-size: 0; } .news article { width: 33.3333333333%; top: 0; margin-top: 30px; padding-left: 15px; padding-right: 15px; vertical-align: top; display: inline-block; position: relative; } .news article:nth-child(-n+3) { margin-top: 0; } .news article:hover { top: -10px; } .news article .thumbnail { display: block; position: relative; z-index: 1; } .news article .thumbnail img { width: 100%; height: auto; display: block; } .news article .entry { width: calc(100% - 80px); top: -60px; padding: 20px 10px 0 0; background: #f5f5f5; position: relative; z-index: 2; } .news article .entry .categories { margin-bottom: 10px; font-size: 15px; font-weight: 700; color: #0a366c; line-height: 16px; letter-spacing: 5px; } .news article .entry h3 a { font-size: 26px; font-weight: 700; text-decoration: none !important; color: #222 !important; line-height: 1; } /* ---------------------- BEFORE CONTENT ---------------------- */ #before_content { margin-bottom: 50px; padding: 15px 50px; font-size: 16px; font-weight: 700; color: white; line-height: 20px; background: #0a366c; } #before_content a { font-weight: normal; text-decoration: underline; color: #00bdcc; } #before_content a:hover { color: white; } body.page-template-flexible-content #before_content { margin-bottom: 0; } /* --------------- CONTENT --------------- */ #container { padding-top: 90px; } #content { padding-bottom: 50px; } #content h1 { margin-bottom: 30px; padding-bottom: 30px; font-size: 50px; color: #0a366c; line-height: 1; word-break: break-word; position: relative; } #content h1:after { width: 50px; height: 3px; left: 0; bottom: 0; background: #00bdcc; position: absolute; content: ''; } body.page-id-220 #content h1:after, body.parent-pageid-220 #content h1:after { background: #bde145; } body.page-id-40 #content h1:after, body.parent-pageid-40 #content h1:after { background: #f3c21d; } body.page-id-98 #content h1:after, body.parent-pageid-98 #content h1:after { background: #00bdcc; } #content h3 { margin-bottom: 10px; font-size: 30px; font-weight: 700; line-height: 1; } body.parent-pageid-15 #content h3 { color: #bde145; } body.page-template #content h3 { margin-bottom: 30px; } #content p { margin-bottom: 20px; } #content img { max-width: 100%; height: auto; } #content a { text-decoration: underline; color: #00bdcc; } #content a:hover { color: #222; } #content ul { margin-left: 30px; margin-bottom: 20px; } /* Download */ #content a.download { margin-bottom: 10px; padding: 16px 60px 16px 180px; font-weight: 700; text-decoration: none !important; color: #222 !important; line-height: 20px; background: #f0f0f0; display: block; position: relative; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #content a.download:before { height: 100%; left: 0; top: 0; padding: 20px 30px 10px 70px; font-size: 13px; font-weight: 700; color: white; line-height: 14px; background: #0a366c url(images/icon_download_white.svg) no-repeat 30px 15px; background-size: 24px auto; position: absolute; content: 'LETÖLTÉS'; } #content a.download:after { right: 20px; top: 50%; font-size: 13px; font-weight: 700; color: #000; line-height: 14px; position: absolute; opacity: 0.5; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #content a.download.pdf:after { content: 'PDF'; } #content a.download.xls:after { content: 'XLS'; } #content a.download.doc:after { content: 'DOC'; } #content a.download.mp4:after { content: 'MP4'; } #content a.download.mpg:after { content: 'MPG'; } #content a.download + br { display: none; } #content a.download:hover { color: white !important; background: #00bdcc; } #content a.download:hover:after { color: white; } /* Content has gallery */ #content .content_has_gallery { display: flex; } #content .content_has_gallery .main_text { width: fit-content; padding-left: calc((100% - 1200px) /2); padding-right: 50px; } #content .content_has_gallery .gallery { width: calc(((100% - 1200px) /2) + 800px); } /* --------------------- PAGE SELECTOR --------------------- */ #content .page_selector .article { height: 50vh; margin-top: 100px; display: flex; } #content .page_selector .article:first-child { margin-top: 0; } #content .page_selector .article .text { width: 50%; left: -10%; padding-right: 5%; padding-left: 5%; position: relative; opacity: 0; } #content .page_selector .article .text p { text-align: justify; } #content .page_selector .article .image { width: 50%; left: 10%; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; opacity: 0; } #content .page_selector .article:nth-child(2n) .text { left: 5%; padding-right: 5%; padding-left: 50px; order: 2; } #content .page_selector .article:nth-child(2n) .image { left: -10%; order: 1; } /* Animation */ #content .page_selector .article.reveal .text, #content .page_selector .article.reveal .image, #content .page_selector .article.reveal:nth-child(2n) .text, #content .page_selector .article.reveal:nth-child(2n) .image { left: 0; opacity: 1; } /* ------------------------ FLEXIBLE CONTENT ------------------------ */ /* Text width two columns */ #content .flexible_content .text_width_two_columns .title { margin-bottom: 30px; font-size: 50px; color: #0a366c; line-height: 1; } #content .flexible_content .text_width_two_columns .subtitle { margin-bottom: 50px; padding-top: 35px; font-size: 16px; line-height: 1; letter-spacing: 3px; position: relative; } #content .flexible_content .text_width_two_columns .subtitle:before { width: 50px; height: 4px; left: 50%; top: 0; background: #f4c31e; position: absolute; content: ''; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #content .flexible_content .text_width_two_columns .boxes { margin-left: -20px; margin-right: -20px; display: flex; flex-wrap: wrap; } #content .flexible_content .text_width_two_columns .boxes .box { width: 50%; height: auto !important; padding: 0 20px; display: block !important; } body.parent-pageid-220 #content .flexible_content .text_width_two_columns .subtitle:before { background: #bde145; } /* Parallax */ #content .flexible_content .parallax { height: 60vh; background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; position: relative; overflow: hidden; } #content .flexible_content .parallax .bgr_wrap { width: 100%; height: 100%; left: 0; top: 0; position: absolute; clip: rect(0, auto, auto, 0); } #content .flexible_content .parallax .bgr { width: 100%; height: 100%; left: 0; top: 0; display: block; position: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; transform: translateZ(0); will-change: transform; } /* Centered text */ #content .flexible_content .text_centered .title { margin-bottom: 30px; padding-bottom: 35px; font-size: 50px; color: #0a366c; line-height: 1; } #content .flexible_content .text_centered .title:before { width: 50px; height: 4px; left: 50%; bottom: 0; background: #f4c31e; position: absolute; content: ''; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #content .flexible_content .text_centered .h4 { margin-bottom: 50px; font-size: 16px; line-height: 1; letter-spacing: 3px; } #content .flexible_content .text_centered .subtitle { position: relative; } body.parent-pageid-220 #content .flexible_content .text_centered .title:before { background: #bde145; } /* Text with image */ #content .flexible_content .text_with_image .title { margin-bottom: 40px; padding-bottom: 35px; font-size: 50px; color: #0a366c; line-height: 1; position: relative; } #content .flexible_content .text_with_image .title:before { width: 50px; height: 4px; left: 50%; bottom: 0; background: #f4c31e; position: absolute; content: ''; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #content .flexible_content .text_with_image .h4 { margin-bottom: 50px; font-size: 16px; line-height: 1; letter-spacing: 3px; } #content .flexible_content .text_with_image .row .col.col_text { padding-left: 50px; vertical-align: middle; } #content .flexible_content .text_with_image .row .col.col_text.col_text_inverse { padding-left: 0; padding-right: 50px; } /* Two columns images */ #content .flexible_content .two_columns_images .row .col img { width: 100%; height: auto; display: block; } #content .flexible_content .two_columns_images .row .col.col_left { padding-right: 25px; } #content .flexible_content .two_columns_images .row .col.col_right { padding-left: 25px; } body.parent-pageid-220 #content .flexible_content .text_with_image .title:before { background: #bde145; } /* Downloads */ #content .downloads { margin-left: -20px; margin-right: -20px; margin-bottom: 100px; display: flex; flex-wrap: wrap; } #content .downloads:last-of-type { margin-bottom: 0; } #content .downloads .download { width: 25%; margin-top: 50px; padding: 0 20px; } #content .downloads .download:last-of-type { margin-bottom: 0; } #content .downloads .download:nth-child(-n+4) { margin-top: 0; } #content .downloads .download a { line-height: 20px; display: block; } #content .downloads .download a img { width: 100%; height: auto; display: block; } #content .downloads .download a.title { margin-top: 20px; font-size: 17px; } /* Pagination */ #content .pagination { text-align: center; } #content .pagination span.pages { margin-bottom: 20px; padding-bottom: 15px; font-size: 16px; font-weight: 700; line-height: 16px; border-bottom: 1px solid #ddd; display: block; } #content .pagination a, #content .pagination span.current { width: 40px; height: 40px; vertical-align: top; line-height: 40px; display: inline-block; } #content .pagination span.current { color: white; background: #0a366c; } /* -------------- FOOTER -------------- */ /* Footer top */ #footer .footer_top { background: #0a366c; } #footer .footer_top .inner { padding-top: 50px; padding-bottom: 50px; background: url(images/bgr_footer_top.svg) no-repeat right center; background-size: auto 150%; } #footer .footer_top h3 { margin-bottom: 30px; padding-left: 30px; font-size: 18px; color: white; line-height: 20px; position: relative; } #footer .footer_top h3 a { color: white; } #footer .footer_top h3 a:hover { text-decoration: underline; } #footer .footer_top h3:before { width: 5px; left: 0; top: -5px; bottom: -5px; background: #bde145; position: absolute; content: ''; } #footer .footer_top .col_our_products h3:before { background: #f4c31e; } #footer .footer_top .col_informations h3:before { background: #00bdcc; } #footer .footer_top .col_social .social_wrapper { padding-left: 30px; font-size: 0; } #footer .footer_top .col_social .social_wrapper a { width: 50px; height: 50px; margin-right: 20px; vertical-align: top; background-color: white; background-repeat: no-repeat; background-position: center; background-size: auto 24px; display: inline-block; } #footer .footer_top .col_social .social_wrapper a:hover { background-color: rgba(255,255,255,0.9); } #footer .footer_top .col_social .social_wrapper a.facebook { background-image: url(images/icon_facebook.svg); } #footer .footer_top .col_social .social_wrapper a.linkedin { background-image: url(images/icon_linkedin.svg); } #footer .footer_top .col_social .social_wrapper a.instagram { background-image: url(images/icon_instagram.svg); } #footer .footer_top ul { margin-left: 30px; list-style: none; } #footer .footer_top ul li a { font-size: 19px; color: #77d3f7; line-height: 30px; display: inline-block; } #footer .footer_top ul li a:hover { text-decoration: underline; color: white; } /* Footer center */ #footer .footer_center { padding: 50px 0; font-size: 0; background: #f8f8f8; } #footer .footer_center img { width: auto; height: 40px; margin: 0 30px; vertical-align: top; display: inline-block; } /* Footer top */ #footer .footer_bottom { font-size: 19px; color: #999; line-height: 20px; } #footer .footer_bottom .inner { padding-top: 15px; padding-bottom: 15px; } #footer .footer_bottom a { text-decoration: underline; color: #999; } #footer .footer_bottom a:hover { color: #000; } /* ---------------------- SZÉCHENYI 2020 ---------------------- */ #szechenyi2020 { width: auto; height: 150px; right: 0; bottom: 0; display: inline-block; position: fixed; z-index: 100; } #szechenyi2020 img { width: auto; height: 100%; display: block; } body.fixed_header #szechenyi2020 { bottom: -150px; } /* ------------------ 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: 20px; text-align: left !important; 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: 15px; font-weight: 700; color: #121738 !important; 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; } .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 #ddd; } .form_row textarea { min-height: 150px; padding: 10px 0; resize: vertical; } .wpcf7 { padding: 50px; border: 2px solid #bde145; position: relative; } .wpcf7:before { width: 140px; left: 50%; top: -17px; font-size: 15px; font-weight: 700; text-align: center; color: #bde145; line-height: 30px; background: white; position: absolute; content: 'Kapcsolati űrlap'; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } body.en .wpcf7:before { content: 'Contact form'; } body.de .wpcf7:before { content: 'Kontakt Formular'; } /* ------------------- RWD DESIGN ------------------- */ @media only screen and (max-width: 1440px) { /* DISPLAY: None */ .hide_in_1440 { display: none !important; } /* HEADER */ #header .inner { padding-left: 20px; padding-right: 20px; } /* BOXES */ .boxes .box { height: 60vh; position: relative; } /* BOXES: Content */ .boxes .box .content { width: 500px; } /* BOXES: Image */ .boxes .box .image { width: calc(100% - 500px); } /* BEFORE CONTENT */ #before_content { padding: 15px 20px; } /* PAGE SELECTOR */ #content .page_selector .article .text { padding-right: 3%; padding-left: 3%; } } @media only screen and (max-width: 1200px) { /* DEFAULT */ .p_l_20 { padding-left: 20px; } .p_r_20 { padding-right: 20px; } /* BOXES */ .boxes .box { height: 50vh; } /* CONTENT */ #content h1 { font-size: 46px; } /* --------------------- PAGE SELECTOR --------------------- */ #content .page_selector .article { height: 70vh; } /* CONTENT: Content has gallery */ #content .content_has_gallery .main_text { width: calc(100% - 400px); padding-left: 20px; } #content .content_has_gallery .gallery { width: 400px; padding-right: 20px; } /* FOOTER: Footer top */ #footer .footer_top .col_social .social_wrapper a { margin-right: 10px; } } @media only screen and (max-width: 960px) { /* DISPLAY: None */ .hide_in_960 { display: none !important; } /* DISPLAY: Block */ .show_in_960 { display: block !important; } /* HEADER */ #header { height: 80px; } #header .inner { padding-right: 110px; } #header .right_panel { right: auto; padding-right: 0; position: relative; } /* HEADER: Language switcher */ #header .language_selector { top: 20px; margin-left: 0; } /* VIDEO SLIDER */ #video_slider { height: auto; background: white; display: block; } #video_slider .video { width: 100%; height: 200px; margin-bottom: 3px; background-color: #0a366c; background-image: none !important; } #video_slider .video:last-child { margin-bottom: 0; } #video_slider .video video { display: none !important; } #video_slider .video .video_thumbnail { width: 400px; height: 100%; left: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; } #video_slider .video .read_more { width: calc(100% - 400px); left: 400px; top: 50%; bottom: auto; padding: 15px 30px; font-size: 30px; color: white; background: transparent; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #video_slider .video .read_more:before { display: none; } #video_slider.video_left_active .video.video_left { width: 100%; } #video_slider.video_left_active .video.video_right { width: 100%; } #video_slider.video_left_active .video.video_right .read_more { opacity: 1; } #video_slider.video_right_active .video.video_left { width: 100%; } #video_slider.video_right_active .video.video_left .read_more { opacity: 1; } #video_slider.video_right_active .video.video_right { width: 100%; } /* BOXES */ .boxes { padding: 50px 0; } .boxes .box { height: auto; display: block; } .boxes:first-of-type { padding-top: 50px; } /* BOXES: Content */ .boxes .box .content { width: 100%; padding: 0 20px 20px 20px; text-align: left; } .boxes .box .content .title:after { left: 0; right: auto; } .boxes .box .content .vertical_middle { top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .boxes .box .content .title { font-size: 40px; } /* BOXES: Image */ .boxes .box .image { width: 100%; height: 300px; } /* Inverse */ .boxes:nth-child(odd) .box .content { left: -10%; } .boxes:nth-child(odd) .box .image { left: 10%; } /* Animation */ .boxes .box.reveal .content, .boxes .box.reveal .image { left: 0 !important; } /* VIDEOS */ #videos { padding: 50px 0; } #videos .title { font-size: 50px; } /* BLOG */ .blog { padding: 0 0 50px; } .blog .title { font-size: 50px; } .blog .news article:nth-child(3) { display: none; } .news { margin-left: -10px; margin-right: -10px; } .news article { width: 50%; padding-left: 10px; padding-right: 10px; } .news article:nth-child(3) { margin-top: 30px; } .news article .entry { width: calc(100% - 20px); } .news article .entry h3 a { font-size: 24px; } /* CONTENT */ #container { padding-top: 80px; } /* CONTENT: Content has gallery */ #content .content_has_gallery .main_text { width: calc(100% - 300px); } #content .content_has_gallery .gallery { width: 300px; } /* PAGE SELECTOR */ #content .page_selector .article { height: auto; flex-wrap: wrap; } #content .page_selector .article .text { width: 100%; padding: 20px; order: 2; } #content .page_selector .article .text .vertical_middle { top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #content .page_selector .article:first-child .text { padding-top: 0; } #content .page_selector .article .image { width: 100%; height: 300px; margin-bottom: 20px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; opacity: 0; order: 1; -webkit-transition-delay: 0s !important; -moz-transition-delay: 0s !important; -o-transition-delay: 0s !important; transition-delay: 0s !important; } #content .page_selector .article:nth-child(2n) .text { padding: 20px; order: 2; } #content .page_selector .article:nth-child(2n) .image { order: 1; } /* FLEXIBLE CONTENT: Text width two columns */ #content .flexible_content .text_width_two_columns .inner { max-width: none; } #content .flexible_content .text_width_two_columns .boxes { margin-left: 0; margin-right: 0; display: block; } #content .flexible_content .text_width_two_columns .boxes .box { width: 100%; padding: 0; } /* FLEXIBLE CONTENT: Text with image */ #content .flexible_content .text_with_image .row { display: block; } #content .flexible_content .text_with_image .row .col { width: 100%; display: flex; flex-wrap: wrap; } #content .flexible_content .text_with_image .row .col.col_image { order: 1; } #content .flexible_content .text_with_image .row .col.col_image img { width: auto; height: auto; max-height: 300px; margin: 0 auto 20px; display: block; } #content .flexible_content .text_with_image .row .col.col_text { padding-left: 0; order: 2; } #content .flexible_content .text_with_image .row .col.col_text.col_text_inverse { padding-right: 0; } /* FLEXIBLE CONTENT: Two columns images */ #content .flexible_content .two_columns_images .row .col { width: 100%; display: block; } #content .flexible_content .two_columns_images .row .col.col_left { margin-bottom: 20px; padding-right: 0; } #content .flexible_content .two_columns_images .row .col.col_right { padding-left: 0; } /* CONTENT: Downloads */ #content .downloads .download { width: 33.3333333333%; } #content .downloads .download:nth-child(4) { margin-top: 50px; } /* FOOTER: Footer top */ #footer .footer_top .col { width: 50%; margin-top: 30px; } #footer .footer_top .col:nth-child(-n+2) { margin-top: 0; } /* Footer center */ #footer .footer_center img { height: 40px; } } @media only screen and (max-width: 768px) { /* VIDEO SLIDER */ #video_slider .video { height: 150px; } #video_slider .video .video_thumbnail { width: 300px; } #video_slider .video .read_more { width: calc(100% - 300px); left: 300px; } /* Csonkagroup */ .boxes .box.box_csonkagroup .content { text-align: left; } .boxes .box.box_csonkagroup .content .title:after { left: 0; right: auto; } /* Products box */ .boxes .box.box_products .image { left: 10%; } .boxes .box.box_products .content { left: -10%; } /* VIDEOS */ #videos { padding: 30px 0; } #videos .title { font-size: 40px; } /* BLOG */ .blog .title { font-size: 40px; } /* BEFORE CONTENT */ #before_content { margin-bottom: 30px; } /* CONTENT */ #content h1 { font-size: 7vw; } /* CONTENT: Content has gallery */ #content .content_has_gallery { display: block; } #content .content_has_gallery .main_text { width: 100%; padding-right: 20px; } #content .content_has_gallery .gallery { width: 100%; padding-left: 20px; } /* FLEXIBLE CONTENT: Text width two columns */ #content .flexible_content .text_width_two_columns .title { font-size: 40px; } #content .flexible_content .text_width_two_columns .subtitle { margin-bottom: 30px; } /* FLEXIBLE CONTENT: Centered text */ #content .flexible_content .text_centered .title { font-size: 40px; } /* FLEXIBLE CONTENT: Text with image */ #content .flexible_content .text_with_image .title { font-size: 40px; } /* FOOTER: Footer center */ #footer .footer_center { padding: 20px 0; } #footer .footer_center img { width: auto; margin: 10px auto; display: block; } /* FOOTER: Footer top */ #footer .footer_bottom .copyright { display: block; } /* FORM */ .form_row.form_row_first, .form_row.form_row_last { width: 100%; float: none; } .wpcf7 { padding: 30px; } .wpcf7 .button { width: 100%; float: none; } } @media only screen and (max-width: 640px) { /* HEADER: Logo */ #header .logo { height: 30px; } /* VIDEO SLIDER */ #video_slider .video .video_thumbnail { width: 200px; } #video_slider .video .read_more { width: calc(100% - 200px); left: 200px; } /* BOXES */ .boxes .box .image { height: 250px; } /* CONTENT */ #content h1 { font-size: 8vw; } #content a.download { margin-bottom: 10px; padding: 14px 20px 14px 80px; font-weight: 700; text-decoration: none !important; color: #222 !important; line-height: 20px; background: #f7f4ef; display: block; position: relative; overflow: hidden; } #content a.download:before { width: 60px; padding: 0; background-position: center; content: ''; } #content a.download:after { right: auto; top: auto; display: block; position: relative; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* PAGE SELECTOR */ #content .page_selector .article .image { height: 250px; } /* CONTENT: Downloads */ #content .downloads { margin-left: -15px; margin-right: -15px; } #content .downloads .download { width: 50%; margin-top: 30px; padding: 0 15px; } #content .downloads .download:nth-child(3), #content .downloads .download:nth-child(4) { margin-top: 30px; } } @media only screen and (max-width: 480px) { /* DEFAULT: Animation */ .anim_slide_left, .anim_slide_right { top: 50px; left: auto; right: auto; } .reveal .anim_slide_left, .reveal .anim_slide_right { top: 0; left: auto; right: auto; } /* HEADER: Language switcher */ #header .language_selector { display: none; } /* VIDEO SLIDER */ #video_slider .video .video_thumbnail { width: 100px; } #video_slider .video .read_more { width: calc(100% - 100px); left: 100px; } /* BOXES */ .boxes .box .image { height: 200px; } /* BLOG */ .blog .news article:nth-child(3) { display: block; } .news { margin-left: 0; margin-right: 0; } .news article { width: 100%; padding-left: 0; padding-right: 0; display: block; } .news article:nth-child(2) { margin-top: 30px; } .news article:hover { top: 0; } .news article .entry h3 a { font-weight: 700; text-decoration: none !important; color: #222 !important; line-height: 1; } /* CONTENT */ /*#content h1 { font-size: 10vw; }*/ /* PAGE SELECTOR */ #content .page_selector .article .image { height: 200px; } /* FLEXIBLE CONTENT: Text width two columns */ #content .flexible_content .text_width_two_columns .title { font-size: 30px; } /* FLEXIBLE CONTENT: Centered text */ #content .flexible_content .text_centered .title { font-size: 30px; } /* FLEXIBLE CONTENT: Text with image */ #content .flexible_content .text_with_image .title { font-size: 30px; } /* CONTENT: Downloads */ #content .downloads { margin-left: -10px; margin-right: -10px; } #content .downloads .download { padding: 0 10px; } /* FOOTER: Footer top */ #footer .footer_top .col { width: 100%; display: block; } #footer .footer_top .col:nth-child(2) { margin-top: 30px; } } @media only screen and (max-width: 375px) { /* DEFAULT */ .button { width: 100%; height: auto; padding: 13px 20px; line-height: 20px; display: block; } /* NAVIGATION: Language chooser */ #rwd_menu ul.language-chooser li { padding: 10px 5px; } #rwd_menu ul.language-chooser li a { font-size: 16px; } } @media only screen and (max-width: 320px) { /* NAVIGATION: Language chooser */ #rwd_menu ul.language-chooser li img { margin-left: auto; margin-right: auto; display: block; } }