/* Theme Name: MD hip hop tánciskola Theme URI: http://hiphoptanciskola.com Description: A Master Dance tánciskola weboldalának alapértelmezett sablonja Author: Digitalform Author URI: http://digitalform.hu Version: 1 */ *{ 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-green: #81ad45; --color-silver: #f0f0f0; } body { font-family: 'Lato', sans-serif; font-size: 16px; color: var(--color-secondary); line-height: 30px; } body.home { overflow: hidden; } body.is-loaded { overflow-y: auto; } body.rwd_menu__opened { overflow-y: hidden; } textarea, input, select, button { font-family: 'Lato', sans-serif; font-size: 15px; outline: none; } h1, h2, h3, h4 { font-weight: normal; line-height: 100%; } /* Classes */ .left { float: left; } .right { float: right; } .clear { clear: both; } .inner { max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; } .inner_700 { max-width: 700px; } .inner_800 { max-width: 800px; } .inner_960 { max-width: 960px; } .alignleft { margin: 0 20px 5px 0; float: left; } .alignright { margin: 0 0 5px 20px; float: right; } .aligncenter { margin: 0 auto 20px auto; display: block; } .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, .required { color: #ff0000; } .b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .p_r_50 { padding-right: 50px; } .bgr_dark { background-color: var(--color-secondary); } /* Buttons */ .button { height: 56px; padding: 0 30px; font-size: 14px; font-weight: 500; text-transform: uppercase; text-align: center; color: #000; line-height: 56px; background-color: var(--color-primary); display: inline-block; cursor: pointer; } .button:hover { opacity: 90%; } .button.button_full { padding: 0 !important; display: block; } .button.button_black { background-color: #000; } .button.button_small { height: 40px; padding: 0 20px; font-size: 14px !important; line-height: 40px; } /* 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; } /* Cols */ .row { width: 100%; font-size: 0; display: block; } .row .col { font-size: 16px; vertical-align: top; display: inline-block; position: relative; } .row .col_20 { width: 20%; } .row .col_25 { width: 25%; } .row .col_33 { width: 33.3333333333%; } .row .col_50 { width: 50%; } .row .col_66 { width: 66%; } .row.row_table { height: 100%; display: table; } .row.row_table > .col { height: 100%; vertical-align: top; display: table-cell; } /* Font */ .sec_font { font-family: 'Saira Semi Condensed', sans-serif; } .font_bigger { font-size: 18px; } /* Animation */ :before, :after, .anim, .pagination a { -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, #slider .slider_for:before, #content .points .point.show .image: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); } .anim_cubic_slow { -webkit-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1); transition: all 2s cubic-bezier(0.19, 1, 0.22, 1); } /* Checkbox and radio */ input[type="checkbox"], input[type="radio"] { width: 20px; min-width: 20px; height: 20px; margin: -4px 4px 0 0 !important; padding: 0 !important; text-align: center !important; background-color: #4b4b55; 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: 10px; height: 10px; left: 5px; top: 5px; text-align: center; background: var(--color-primary); position: relative; border-radius: 8px; display: block; content: ''; } input[type="checkbox"]:checked:before { width: 10px; height: 10px; left: 5px; top: 5px; text-align: center; background: var(--color-primary); position: relative; display: block; content: ''; } /* -------------- COOKIE -------------- */ #cookie-law-info-bar { font-size: 14px; line-height: 20px; } #cookie-law-info-bar .cli_settings_button { font-weight: 700; text-decoration: underline; } #cookie-law-info-bar .cookie_action_close_header { width: 100%; margin: 10px 0 0 !important; display: block; } /* ---------------------- 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: var(--color-primary) url(images/icon_close.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 .wrapper { padding: 30px; } .white-popup.exitpopup .wrapper h3 { margin-bottom: 10px; font-size: 25px; font-weight: 700; color: var(--color-primary); 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 { padding: 0; font-size: 0; display: table; table-layout: fixed; } .white-popup.exitpopup .wrapper.has_image .image { width: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; display: table-cell; } .white-popup.exitpopup .wrapper.has_image .content { width: 50%; padding: 30px; font-size: 17px; display: table-cell; } /* ------------------- PRELAODER ------------------- */ #preloader { width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: 1000; } #preloader .img { width: 140px; height: 140px; margin: auto; background: url(images/site_loader.png); -webkit-animation: play .8s steps(5) infinite; -moz-animation: play .8s steps(5) infinite; -ms-animation: play .8s steps(5) infinite; -o-animation: play .8s steps(5) infinite; animation: play .8s steps(5) infinite; } /* ------------------- NAVIGATION ------------------- */ #rwd_menu { width: 100%; left: 0; top: 100px; bottom: 0; background: #000; padding: 50px; position: fixed; z-index: 9; visibility: hidden; opacity: 0; } #rwd_menu a { color: white; } /* Primary */ #rwd_menu ul.primary { margin-bottom: 20px; } #rwd_menu ul.primary li { margin: 5px 0; list-style: none; } #rwd_menu ul.primary li a { font-size: 30px; line-height: 100%; } /* Secondary */ #rwd_menu .secondary { margin-bottom: 30px; padding-top: 20px; border-top: 1px solid #222; } #rwd_menu .secondary ul { margin-left: 20px; } #rwd_menu .secondary ul li { color: var(--color-primary); list-style: square; } #rwd_menu .secondary ul li a { font-size: 18px; } /* Language chooser */ #rwd_menu ul.language-chooser { border: 1px solid rgba(255 255 255 / 20%); display: flex; list-style: none !important; } #rwd_menu ul.language-chooser li { border-right: 1px solid rgba(255 255 255 / 10%); flex-grow: 1; flex-basis: 0; } #rwd_menu ul.language-chooser li:last-child { border-right: none; } #rwd_menu ul.language-chooser li a { padding: 10px; text-align: center; text-transform: uppercase; display: block; } body.rwd_menu__opened #rwd_menu { visibility: visible; opacity: 1; } body.rwd_menu__opened #rwd_menu .rwd_menu_wrapper { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* --------------- HEADER --------------- */ #header { width: 100%; height: 150px; left: 0; top: 0; background: var(--color-secondary); position: fixed; z-index: 100; } /* Logo */ #header .logo { left: 100px; position: absolute; } #header .logo img { width: auto; height: 80px; display: block; } body.home.is-loaded #header .logo { opacity: 1; } /* Menu */ #header menu { right: 250px; position: absolute; } #header menu ul { height: 40px; display: flex; flex-wrap: wrap; } #header menu ul li { height: 100%; margin-left: 30px; } #header menu ul li a { height: 100%; font-size: 17px; color: white; line-height: 40px; position: relative; } #header menu ul li a:after { width: 6px; height: 6px; left: 50%; bottom: -20px; margin-left: -3px; background: var(--color-primary); position: absolute; content: ''; opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #header menu ul li a:hover:after { bottom: -10px; opacity: 1; } #header menu ul li.current-menu-item a:after { bottom: -10px; opacity: 1; } body.home.is-loaded #header menu { opacity: 1; } /* qtranxs widget */ #header menu ul .qtranxs_widget ul li { width: 40px; margin-left: 10px; background: white; } #header menu ul .qtranxs_widget ul li.active { display: none; } #header menu ul .qtranxs_widget ul li a { width: 100%; height: 100%; text-align: center; color: var(--color-secondary); display: block; } /* Ajax cart */ #header .ajax_cart { width: 40px; height: 40px; right: 80px; background: url(images/icon_cart_white.svg) no-repeat center; background-position: auto 40px; position: absolute; } #header .ajax_cart .count { min-width: 24px; height: 24px; left: 18px; top: -5px; font-size: 14px; text-align: center; color: white; line-height: 20px; background: var(--color-primary); border: 2px solid var(--color-secondary); position: absolute; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } body.home.is-loaded #header .ajax_cart { opacity: 1; } /* Alternative apply button */ #header .apply_alt_button { right: 100px; position: absolute; } /* RWD button */ #header .rwd_button { width: 60px; height: 60px; right: 20px; font-size: 30px; background: transparent; position: absolute; cursor: pointer; } #header .rwd_button .burg { width: 40px; height: 2px; left: 10px; 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: 40px; 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: -10px; left: 0; } #header .rwd_button .burg:after { top: 10px; 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); } /* If is home */ body.home #header menu { opacity: 0; } body.home #header .logo { opacity: 0; } body.home #header .ajax_cart { opacity: 0; } /* Fixed header */ body.fixed_header #header { height: 100px; background: #000; } body.fixed_header #header .logo img { height: 50px; } /* ----------------- FRONTPAGE ----------------- */ #frontpage { padding-top: 150px; } body.fixed_header #frontpage { padding-top: 100px; } /* -------------- SLIDER -------------- */ #slider_contact { height: calc(100vh - 150px); background: var(--color-secondary); } #slider_contact #slider { height: 100%; position: relative; z-index: 1; } #slider_contact #slider .slider_for { top: 0; right: 250px; bottom: 60px; left: 0; position: absolute; opacity: 0; } #slider_contact #slider .slider_for:before { top: 50px; right: -50px; bottom: 50px; left: 0; background: #323338; position: absolute; content: ''; z-index: -1; -webkit-transition-delay: 1.9s; -moz-transition-delay: 1.9s; -o-transition-delay: 1.9s; transition-delay: 1.9s; } #slider_contact #slider .slider_for .slick-list, #slider_contact #slider .slider_for .slick-track, #slider_contact #slider .slider_for .slick-slide , #slider_contact #slider .slider_for .slick-slide > div { height: 100%; } #slider_contact #slider .slider_for .item { height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0; position: relative; } #slider_contact #slider .slider_for .item .cover { width: 100%; height: 100%; left: 0; top: 0; padding-left: 100px; position: absolute; } #slider_contact #slider .slider_for .item .cover .title { width: 40%; font-size: 70px; color: white; line-height: 100%; } #slider_contact #slider .slider_for .item .cover .text { width: 40%; margin: 30px 0; font-size: 18px; color: white; line-height: 24px; } #slider_contact #slider .slider_nav { height: 80px; left: -100%; bottom: 0; padding-left: 100px; font-size: 0; background: var(--color-secondary); position: absolute; } #slider_contact #slider .slider_nav div { outline: none;; } #slider_contact #slider .slider_nav .slick-list, #slider_contact #slider .slider_nav .slick-track, #slider_contact #slider .slider_nav .slick-slide, #slider_contact #slider .slider_nav .slick-slide > div { height: 100%; } #slider_contact #slider .slider_nav .slick-track { width: auto !important; } #slider_contact #slider .slider_nav .slick-list { overflow: unset; } #slider_contact #slider .slider_nav .slick-slide { width: 30px !important; height: 4px; margin-right: 20px; vertical-align: top; background: #68696c; display: inline-block; position: relative; cursor: pointer; } #slider_contact #slider .slider_nav .slick-slide .count { left: 0; top: -25px; font-size: 14px; font-weight: 900; color: white; position: absolute; opacity: 0; } #slider_contact #slider .slider_nav .slick-slide.slick-current { background: white; } #slider_contact #slider .slider_nav .slick-slide.slick-current .count { opacity: 1; } /* Body is loaded */ body.is-loaded #slider_contact #slider .slider_for { opacity: 1; } body.is-loaded #slider_contact #slider .slider_for .item { opacity: 1; } body.is-loaded #slider_contact #slider .slider_nav { left: 0; } /* ---------------- ABOUT US ---------------- */ #aboutus { padding: 70px 0; position: relative; z-index: 1; } #aboutus:after { width: 1px; height: 70px; left: 50%; bottom: -1px; background: #28282e; position: absolute; content: ''; } #aboutus .title { max-width: 600px; margin-bottom: 30px; font-size: 60px; color: var(--color-secondary); line-height: 100%; } #aboutus .title.inline_block { margin-top: 70px; display: inline-block; } #aboutus .subtitle { margin-bottom: 30px; padding-left: 30px; font-size: 13px; font-weight: 900; color: var(--color-primary); line-height: 13px; border-left: 1px solid #28282e; } #aboutus .text { margin-bottom: 50px; padding-left: 30px; padding-right: 100px; font-size: 17px; color: #777; line-height: 30px; border-left: 1px solid #28282e; } #aboutus .text p { margin-bottom: 30px; } #aboutus .col_images .image { background-repeat: no-repeat; background-position: center; background-size: cover; } #aboutus .col_images .image1 { width: 450px; height: 80%; top: 0; right: 50px; position: absolute; } #aboutus .col_images .image1:before { width: 320px; height: 320px; top: -50px; right: -50px; background: url(images/grid_yellow.png) repeat left top; position: absolute; content: ''; z-index: -1; } #aboutus .col_images .iframe_wrapper { width: 550px; left: -50px; bottom: 0; position: absolute; -moz-box-shadow: 0 20px 20px rgba(0,0,0,0.15); -webkit-box-shadow: 0 20px 20px rgba(0,0,0,0.15); box-shadow: 0 20px 20px rgba(0,0,0,0.15); } /* What represent */ #what_represent { border-top: 1px solid #d9d9d9; position: relative; } #what_represent:before { width: 1px; height: 70px; left: 50%; top: 0; background: #28282e; position: absolute; content: ''; } #what_represent .box_wrapper { font-size: 0; } #what_represent .box_wrapper .box { padding: 70px 50px 80px; border-right: 1px solid #d9d9d9; } #what_represent .box_wrapper .box .icon { height: 160px; } #what_represent .box_wrapper .box .icon img { width: auto; height: 100px; display: inline-block; } #what_represent .box_wrapper .box:nth-child(3) img { width: 220px; height: auto; } #what_represent .box_wrapper .box .title { font-size: 30px; } #what_represent .box_wrapper .box .text { margin-top: 20px; font-size: 17px; color: #777; } #what_represent .box_wrapper.column-1 .box { width: 100%; } #what_represent .box_wrapper.column-2 .box { width: 50%; } #what_represent .box_wrapper.column-3 .box { width: 33.3333333333%; } /* Timetable */ #timetable .title { margin-bottom: 30px; font-size: 60px; color: white; line-height: 100%; } #timetable .timetable_wrapper .close { width: 60px; height: 60px; left: 50%; top: -30px; margin-left: -30px; background: var(--color-primary) url(images/icon_close.svg) no-repeat center; background-size: auto 20px; position: absolute; cursor: pointer; } #timetable .timetable_wrapper .close:hover { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* Timetable tab nav */ .timetable .tabnav { padding-top: 50px; background: var(--color-primary); } .timetable .tabnav ul { margin-left: 0 !important; margin-bottom: 0 !important; font-size: 0; text-align: center; } .timetable .tabnav ul li { height: 50px; padding: 0 30px; font-size: 16px; font-weight: 700; vertical-align: top; color: white; line-height: 50px; display: inline-block; list-style: none; cursor: pointer; } .timetable .tabnav ul li.active { color: var(--color-secondary); background: white; } .timetable .tabcontent { padding: 30px 60px; } .timetable .tabcontent h3 { margin-bottom: 30px; font-size: 30px; } .timetable .tabcontent .content { display: none; } body.page-template-timetable .timetable .tabnav { margin-bottom: 30px; } body.page-template-timetable .timetable .tabcontent { padding: 0; } #timetable .timetable_wrapper table.timetable { width: 100%; border-collapse: collapse; } #timetable .timetable_wrapper table.timetable thead th { font-size: 14px; font-weight: normal; text-transform: uppercase; color: white; background: var(--color-secondary); } #timetable .timetable_wrapper table.timetable tbody tr:nth-child(even) { background: var(--color-silver); } #timetable .timetable_wrapper table.timetable tbody td { padding: 5px; font-size: 15px; text-align: center; border-bottom: 1px solid #ddd; } #timetable .timetable_wrapper table.timetable tbody td:first-child { text-align: left; } #timetable .timetable_wrapper table.timetable tbody td:nth-child(2), #timetable .timetable_wrapper table.timetable tbody td:nth-child(3), #timetable .timetable_wrapper table.timetable tbody td:nth-child(4) { width: 29%; } /* New timatable */ .timetable_place { margin-bottom: 50px; } .timetable_place h3 { margin-bottom: 30px !important; } .timetable_place .new_timetable_wrapper { width: auto !important; margin-left: -10px; margin-right: -10px; } .timetable_place .new_timetable_wrapper .day { padding-left: 10px; padding-right: 10px; } .timetable_place .new_timetable_wrapper .day .wrapper h4 { margin-bottom: 10px; padding: 10px; font-size: 16px; color: white; line-height: 1; background: #000; } .timetable_place .new_timetable_wrapper .day .lesson { margin-bottom: 20px; padding: 15px; line-height: 25px; background: var(--color-silver); border-top: 2px solid var(--color-primary); } /* Apply */ #apply_testimonials { background: var(--color-secondary); position: relative; z-index: 0; } #apply_testimonials .row { table-layout: fixed; } #apply_testimonials .col_form { position: relative; } #apply_testimonials .col_form .wrapper { width: 100%; max-width: 600px; padding: 70px 70px 70px 0; float: right; } #apply_testimonials .col_form .wrapper .title { margin-bottom: 20px; font-size: 30px; color: white; line-height: 100%; } #apply_testimonials .col_testimonials { background: #000; } #apply_testimonials .col_testimonials .testimonials_wrapper .testimonials { background: #000; } #apply_testimonials .col_testimonials .testimonials_wrapper .testimonials ul.slick-dots { margin-left: 50px; padding-bottom: 20px; font-size: 0; } #apply_testimonials .col_testimonials .testimonials_wrapper .testimonials ul.slick-dots li { margin-right: 14px; vertical-align: top; display: inline-block; } #apply_testimonials .col_testimonials .testimonials_wrapper .testimonials ul.slick-dots li button { width: 20px; height: 20px; text-indent: -9999px; background: rgba(255,255,255,0.4); cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #apply_testimonials .col_testimonials .testimonials_wrapper .testimonials ul.slick-dots li.slick-active button { background: var(--color-primary); } #apply_testimonials .col_testimonials .testimonials_wrapper .slick-list { width: 100% !important; } #apply_testimonials .col_testimonials .testimonials_wrapper .item { padding: 50px; color: white; } #apply_testimonials .col_testimonials .testimonials_wrapper .item .text { margin-bottom: 20px; font-size: 25px; line-height: 1.2; } #apply_testimonials .col_testimonials .testimonials_wrapper .item .author { padding-left: 40px; font-size: 16px; position: relative; } #apply_testimonials .col_testimonials .testimonials_wrapper .item .author:before { width: 30px; height: 1px; left: 0; top: 50%; background: var(--color-primary); position: absolute; content: ''; } #apply_testimonials .col_testimonials .testimonials_images { position: relative; } #apply_testimonials .col_testimonials .testimonials_images img { width: 100%; height: auto; display: block; } #apply_testimonials .col_testimonials .testimonials_images ul.slick-dots { left: 30px; bottom: 30px; font-size: 0; position: absolute; } #apply_testimonials .col_testimonials .testimonials_images ul.slick-dots li { margin-right: 14px; vertical-align: top; display: inline-block; } #apply_testimonials .col_testimonials .testimonials_images ul.slick-dots li button { width: 20px; height: 20px; text-indent: -9999px; background: rgba(255,255,255,0.4); cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #apply_testimonials .col_testimonials .testimonials_images ul.slick-dots li.slick-active button { background: var(--color-primary); } #apply_testimonials .col_testimonials .testimonials_images .slick-arrow { width: 60px; height: 60px; left: 20px; top: 50%; margin-top: -30px; text-indent: -9999px; background: transparent url(images/icon_arrow_left_white.svg) no-repeat center; background-size: 100% auto; position: absolute; z-index: 10; cursor: pointer; opacity: 0.5; } #apply_testimonials .col_testimonials .testimonials_images .slick-arrow:hover { opacity: 1; } #apply_testimonials .col_testimonials .testimonials_images .slick-arrow.slick-next { left: auto; right: 20px; background-image: url(images/icon_arrow_right_white.svg); } /* News */ #news { padding: 70px 0; background: var(--color-silver); } #news .title { max-width: 50%; margin-bottom: 30px; font-size: 60px; color: var(--color-secondary); line-height: 100%; } .news_list { margin-left: -20px; margin-right: -20px; display: flex; flex-wrap: wrap; } .news_list article { width: 33.3333333333%; margin-top: 40px; padding-left: 20px; padding-right: 20px; vertical-align: top; } .news_list article:nth-child(-n+3) { margin-top: 0; } .news_list article .wrapper { height: 100%; background: white; } .news_list article .wrapper .thumbnail { display: block; position: relative; overflow: hidden; } .news_list article .wrapper .thumbnail img { width: 100%; height: auto; display: block; } .news_list article .wrapper .thumbnail .plus { width: 80px; height: 80px; right: 0; bottom: -80px; background: white url(images/icon_plus.svg) no-repeat center; background-size: auto 18px; position: absolute; } .news_list article .wrapper .thumbnail:hover .plus { bottom: 0; } .news_list article .wrapper .entry { min-height: 180px; padding: 30px; } .news_list article .wrapper .entry a { font-size: 30px; color: var(--color-secondary); line-height: 80%; } .news_list article .wrapper .entry .datetime { margin-bottom: 20px; padding-left: 30px; font-size: 15px; font-weight: 900; color: var(--color-primary); line-height: 15px; border-left: 1px solid #28282e; } /* Gallery */ #gallery { padding: 100px 0 60px; background: var(--color-secondary); position: relative; } #gallery.in_page { margin-bottom: 50px; padding-top: 0; } #gallery div { font-size: 0; line-height: normal; } #gallery .slick-slide { padding: 0 50px; outline: none; } #gallery .slick-slide img { width: 100%; height: auto; display: block; outline: none; opacity: 0.3; outline: none; } #gallery .slick-slide.slick-current img { opacity: 1; } #gallery .count { max-width: 800px; height: 40px; margin: auto; font-size: 14px; font-weight: 900; color: white; line-height: 40px; } #gallery .controls { width: 100%; height: 60px; left: 0; position: absolute; } #gallery .controls .controls_wrapper { max-width: 800px; height: 100%; margin: auto; position: relative; } #gallery .controls button { width: 60px; height: 60px; right: 20px; top: 0; background: transparent url(images/icon_arrow_right_white.svg) no-repeat center; background-size: 60px auto; position: absolute; opacity: 0.3; cursor: pointer; } #gallery .controls button:hover { opacity: 0.6; } #gallery .controls button.prev { left: 20px; right: auto; background-image: url(images/icon_arrow_left_white.svg); } /* Fullwidth gallery */ .fullwidth_gallery { height: 500px; margin-bottom: 50px; } .fullwidth_gallery .slick-list, .fullwidth_gallery .slick-track, .fullwidth_gallery .slick-slide { height: 100%; } .fullwidth_gallery .slick-slide { background-repeat: no-repeat; background-position: center; background-size: cover; } .fullwidth_gallery ul.slick-dots { width: 100%; left: 0; bottom: 30px; font-size: 0; text-align: center; position: absolute; } .fullwidth_gallery ul.slick-dots li { margin: 0 7px; vertical-align: top; display: inline-block; } .fullwidth_gallery ul.slick-dots li button { width: 20px; height: 20px; text-indent: -9999px; background: rgba(255,255,255,0.4); cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .fullwidth_gallery ul.slick-dots li.slick-active button { background: var(--color-primary); } /* ----------------------- BEFORE CONTENT ----------------------- */ #before_content { padding: 5px 0; background: white; border-bottom: 1px solid #ddd; } #before_content .breadcrumb { font-size: 13px; color: #999; } #before_content .breadcrumb a { font-weight: normal; text-decoration: underline; color: #000; } /* ---------------- CONTENT ---------------- */ #container { padding-top: 150px; } #container.dark { background: var(--color-secondary); } body.fixed_header #container { padding-top: 100px; } body.search #container, body.archive.category #container { background: var(--color-silver); } body.home #container { background-color: white; } body.page-template-template-school #container { background: url(images/bgr_body.svg) no-repeat right center; background-size: auto 100%; } body.page-template-template-services #container { background-color: #f7f7f7; } #content { padding: 50px 0; } #content.no_top_padding { padding-top: 0; } #content p { margin-bottom: 20px; } #content h1 { margin-bottom: 50px; font-size: 50px; color: #000; line-height: 100%; } #content h1.white { color: white; } #content h3 { margin-bottom: 10px; font-size: 30px; text-transform: uppercase; line-height: 100%; } #content ul { margin-bottom: 20px; margin-left: 20px; } #content ul.nomargin { margin-left: 0; } #content ol { margin-bottom: 20px; margin-left: 30px; } #content ol li { list-style-type: decimal; } #content ol.lower-alpha li { list-style-type:lower-alpha; } /* Table */ #content table.simple_table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } #content table.simple_table thead tr th { border-bottom: 2px solid #ddd; } #content table.simple_table tbody tr td { border-bottom: 1px solid #ddd; } /* Points */ #content .points .point { margin-bottom: 50px; padding-left: 30px; padding-bottom: 100px; padding-right: 20%; position: relative; z-index: 0; } #content .points .point .image { background-color: #000; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } #content .points .point .image:after { width: 100%; height: 100%; right: 0; top: 0; background: var(--color-primary); position: absolute; content: ''; } #content .points .point.waypoint_reveal .image:after { width: 0; } #content .points .point .text { width: 500px; right: 0; bottom: 0; padding: 50px; color: white; background: var(--color-secondary); position: absolute; } #content .points .point .text .count { margin-bottom: 20px; padding-left: 40px; font-size: 20px; position: relative; } #content .points .point .text .count:before { width: 30px; height: 1px; left: 0; top: 50%; background: var(--color-primary); position: absolute; content: ''; } #content .points .point.odd { padding-left: 20%; padding-right: 30px; } #content .points .point.odd .text { left: 0; right: auto; } /* Points 2 */ #content .points-2 { background: var(--color-silver); position: relative; } #content .points-2:before { width: 100%; height: 120px; left: 0; top: 0; background: var(--color-secondary); position: absolute; content: ''; } #content .points-2 .points_container { margin-left: -25px; margin-right: -25px; font-size: 0; } #content .points-2 .point { width: 33.3333333333%; top: 30px; margin-bottom: 50px; padding-left: 25px; padding-right: 25px; vertical-align: top; display: inline-block; position: relative; z-index: 0; opacity: 0; } #content .points-2 .point.waypoint_reveal { top: 0; opacity: 1; } #content .points-2 .point .point_wrapper { padding: 120px 40px 40px; background: white; border-top: 10px solid var(--color-primary); position: relative; } #content .points-2 .point .point_wrapper .image { width: 90px; height: 100px; left: 40px; top: -10px; background-color: var(--color-secondary); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; } #content .points-2 .point .point_wrapper .text { min-height: 390px; font-size: 17px; color: #666; } #content .points-2 .point .point_wrapper .text h3 { height: 60px; color: #000; } #content .points-2 .point .point_wrapper .text a.adjust { font-weight: 700; color: #000; border-bottom: 2px solid #000; } /* School */ #content .apply__prices.p_t_b_50 { padding-top: 50px; padding-bottom: 50px; color: white; } #content .apply__prices .title { margin-bottom: 20px; font-size: 30px; color: #000; line-height: 100%; } #content .apply__prices .title.white { color: white; } #content .apply__prices .col_form .wrapper { width: 100%; max-width: 600px; padding: 70px 70px 70px 0; } #content .apply__prices .col_form .wrapper .title { color: white; } #content .apply__prices .col_prices { padding: 50px; color: #000; background: var(--color-primary); } #content .apply__prices .col_prices table { margin-bottom: 30px; } #content .apply__prices .col_prices table tbody tr td { width: 50%; padding: 10px; border-bottom: 2px solid #000; } #content .apply__prices .col_prices table tbody tr:last-child td { border-bottom: none; } #content .apply__prices .col_prices table tbody tr td:nth-child(1) { padding-left: 0; font-weight: 700; border-right: 2px solid #000; } #content .apply__prices .col_prices .add_text { font-size: 15px; line-height: 1.4; } /* Services */ #content .services_wrapper { margin-left: -15px; margin-right: -15px; font-size: 0; } #content .services_wrapper .service { width: 25%; margin-bottom: 30px; padding-left: 15px; padding-right: 15px; vertical-align: top; display: inline-block; } #content .services_wrapper .service .wrapper { font-size: 16px; background: white; -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.1); box-shadow: 0 5px 10px rgba(0,0,0,0.1); } #content .services_wrapper .service .wrapper .thumbnail { display: block; overflow: hidden; } #content .services_wrapper .service .wrapper .thumbnail img { width: 100%; height: auto; display: block; position: relative; transform: scale(1) translateZ(0); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } #content .services_wrapper .service .wrapper .thumbnail:hover img { -ms-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); transform: scale(1.05) translateZ(0); } #content .services_wrapper .service .wrapper .entry { padding: 20px; font-size: 20px; } #content .services_wrapper .service .wrapper .entry .excerpt { min-height: 90px; margin-bottom: 20px; } #content .services_wrapper .service .wrapper .entry .excerpt p { margin-bottom: 0 !important } /* Iframe wrapper */ #content .iframe_wrapper { height: 0; margin-bottom: 30px; padding-bottom: 56.25%; padding-top: 25px; position: relative; } #content .iframe_wrapper iframe { width: 100%; height: 100%; left: 0; top: 0; position: absolute; } /* My account page */ body.woocommerce-account #container { background: #000; } body.woocommerce-account #content { color: #ccc; } body.woocommerce-account #content a { text-decoration: underline; color: white; } body.woocommerce-account #content a:hover { text-decoration: none; } body.woocommerce-account #content h1 { color: white; } body.woocommerce-account #content h2 { margin-bottom: 20px; font-size: 30px; font-weight: 700; color: white; } body.woocommerce-account.woocommerce-lost-password .woocommerce { max-width: 800px; margin: auto; } body.woocommerce-account.woocommerce-lost-password .woocommerce .form-row.form-row-first { width: 100%; float: none; } /* Contact */ #content .contact_wrapper { background: var(--color-secondary); position: relative; } #content .contact_wrapper .col_text .page_content { padding-left: calc(((100vw - 1200px)/ 2)); padding-top: 50px; padding-right: 50px; padding-bottom: 50px; font-size: 17px; background: white; } #content .contact_wrapper .col_text .contact_details { padding-left: calc(((100vw - 1200px)/ 2)); padding-top: 50px; padding-right: 50px; padding-bottom: 50px; font-size: 17px; background: var(--color-silver); } #content .contact_wrapper .col_contact_form { padding-left: 50px; padding-top: 120px; padding-right: calc(((100vw - 1200px)/ 2)); padding-bottom: 50px; font-size: 17px; position: relative; } #content .contact_wrapper .col_contact_form:before { width: 100%; height: 50px; left: 0; top: 0; background: white; position: absolute; content: ''; } #content .contact_wrapper .col_contact_form h3 { color: var(--color-primary); } /* Single */ #content.single { font-size: 17px; } #content.single .excerpt { margin-bottom: 30px; font-size: 25px; line-height: 1.5; } #content.single .standard-page-hero { margin-bottom: 30px; } #content.single .standard-page-hero img { max-width: 100%; height: auto; display: block; } #content .content-column { margin-bottom: 30px; } /* Prev / Next post */ #content .prev_next_post { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; display: flex; flex-wrap: wrap; position: relative; } #content .prev_next_post:after { width: 1px; height: 100%; left: 50%; top: 0; background: #ddd; position: absolute; content: ''; } #content .prev_next_post div { width: 50%; text-align: center; } #content .prev_next_post div a { padding: 10px; font-size: 16px; font-weight: 700; color: #000; display: block; } #content .prev_next_post div a:hover { text-decoration: underline; } /* Search */ #content form.search { margin-bottom: 30px; padding: 20px; background: white; display: flex; flex-wrap: wrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 2px 3px rgba(0 0 0 / 10%); -webkit-box-shadow: 0 2px 3px rgba(0 0 0 / 10%); box-shadow: 0 2px 3px rgba(0 0 0 / 10%); } #content form.search input[type=text] { width: calc(100% - 100px); height: 50px; font-size: 18px; background: transparent; } #content form.search input[type=submit] { width: 100px; height: 50px; font-weight: 700; text-align: center; text-transform: uppercase; color: white; background: var(--color-secondary); cursor: pointer; } #content form.search input[type=submit]:hover { background: #000; } /* Pagination */ #content .pagination { margin-top: 50px; text-align: center; } #content .pagination span.pages { margin-bottom: 15px; padding-bottom: 15px; font-size: 15px; font-weight: 700; line-height: 16px; border-bottom: 1px solid #ddd; display: block; } #content .pagination a, #content .pagination span.current { width: 50px; height: 50px; text-align: center; line-height: 50px; display: inline-block; } #content .pagination a { color: var(--color-secondary); } #content .pagination a:hover { background: white; } #content .pagination span.current { color: white; background: var(--color-secondary); } /* ------------------------ FLEXIBLE CONTENT ------------------------ */ /* Flexible content */ #content .block_background_image { background-repeat: no-repeat; background-position: center; background-size: cover; } /* Wysiwyg */ #content .block_wysiwyg { } #content .block_wysiwyg.dark { color: white; background-color: var(--color-secondary); } #content .block_wysiwyg h3 { font-family: 'Saira Semi Condensed', sans-serif; } #content .block_wysiwyg img { max-width: 100%; height: auto; display: inline-block; } #content .block_wysiwyg .wpcf7-form { max-width: 600px; margin-left: auto; margin-right: auto; } #content .block_wysiwyg .content-column { padding-left: 30px; padding-right: 30px; } /* -------------- SCHOOL -------------- */ body.school #content { color: white; } body.school #content h1 { margin-bottom: 30px; } body.school #content .row_intro { margin-bottom: 50px; } body.school #content .row .col_text { padding-right: 50px; font-size: 17px; } body.school #content .row .col_banners { font-size: 0; text-align: right; } body.school #content .row .col_banners a { width: calc(50% - 20px); height: 300px; margin-left: 20px; font-size: 40px; color: #000; background: var(--color-primary); display: inline-block; position: relative; overflow: hidden; } body.school #content .row .col_banners a:before { width: 100%; height: 160px; left: -40%; top: 50px; background: url(images/icon_calendar_white.svg) no-repeat center; background-size: auto 100%; position: absolute; content: ''; opacity: 0.3; } body.school #content .row .col_banners a.prices:before { background-image: url(images/icon_wallet_white.svg); } body.school #content .row .col_banners a:hover:before { left: 0; } body.school #content .row .col_banners a span { left: 30px; bottom: 30px; position: absolute; } /* Teachers */ body.school #content .teachers { padding: 70px 0; color: white; background: #000; } body.school #content .teachers .teachers_wrapper { margin-left: -10px; margin-right: -10px; font-size: 0; } body.school #content .teachers .teachers_wrapper .teacher { width: 33.3333333333%; margin-bottom: 20px; padding-left: 10px; padding-right: 10px; font-size: 16px; vertical-align: top; color: #999; background: url(images/icon_zoom.svg) no-repeat 20px 20px; background-size: auto 50px; display: inline-block; } body.school #content .teachers .teachers_wrapper .teacher .image { margin-bottom: 20px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } body.school #content .teachers .teachers_wrapper .teacher .image:before { padding-top: 80%; display: block; content: ' '; } body.school #content .teachers .teachers_wrapper .teacher:hover .image { opacity: 0.8; } body.school #content .teachers .teachers_wrapper .teacher .name { font-size: 20px; font-weight: 700; color: white; line-height: 1; } /* ----------------- TIMETABLE ----------------- */ #content table.timetable { width: 100%; margin-bottom: 50px; border-collapse: collapse; } #content table.timetable thead th { font-size: 14px; font-weight: normal; text-transform: uppercase; color: white; background: var(--color-secondary); } #content table.timetable tbody tr:nth-child(even) { background: var(--color-silver); } #content table.timetable tbody td { padding: 5px; font-size: 15px; text-align: center; border-bottom: 1px solid #ddd; } #content table.timetable tbody td:first-child { text-align: left; } #content table.timetable tbody td:nth-child(2), #content table.timetable tbody td:nth-child(3), #content table.timetable tbody td:nth-child(4) { width: 29%; } /* Course type */ #content .course_types { padding: 50px 0; background: var(--color-silver); position: relative; } #content .course_types .course_type_container { margin-left: -25px; margin-right: -25px; display: flex; flex-wrap: wrap; } #content .course_types .course_type { width: calc(33.3333333333% - 50px); top: 30px; margin: 50px 25px 0; vertical-align: top; background: white; display: inline-block; position: relative; z-index: 0; opacity: 0; } #content .course_types .course_type:nth-child(-n+3) { margin-top: 0; } #content .course_types .course_type.waypoint_reveal { top: 0; opacity: 1; } #content .course_types .course_type .course_type_wrapper { padding: 120px 40px 40px; border-top: 10px solid var(--color-primary); position: relative; } #content .course_types .course_type .course_type_wrapper .image { width: 90px; height: 100px; left: 40px; top: -10px; background-color: var(--color-secondary); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; } #content .course_types .course_type .course_type_wrapper .text { font-size: 17px; color: #666; } #content .course_types .course_type .course_type_wrapper .text h3 { height: 60px; color: #000; } #content .course_types .course_type .course_type_wrapper .text a.adjust { font-weight: 700; color: #000; border-bottom: 2px solid #000; } /* ---------------- SERVICES ---------------- */ #clients { padding: 50px 0; background: white; border-top: 1px solid #ddd; } #clients .clients_container { font-size: 0; } #clients .clients_container .client { width: 33.3333333333%; height: 150px; text-align: center; vertical-align: top; display: inline-block; } #clients .clients_container .client img { width: auto; max-width: 80%; height: auto; max-height: 120px; margin: auto; display: block; } /* ------------ CAMP ------------ */ body.camp .scroll_down { width: 50px; height: 100px; background: white url(images/icon_arrow_down.svg) no-repeat center 70%; background-size: 20px auto; display: inline-block; } body.camp .scroll_down:hover { background-position: center 80%; } /* Header */ body.camp #header { background: none; } body.camp.fixed_header #header { background: #000; } /* Ajax cart */ body.camp #header .ajax_cart .count { min-width: 20px; height: 20px; left: 20px; top: -3px; border: none; } body.camp.fixed_header #header .ajax_cart .count { min-width: 24px; height: 24px; left: 18px; top: -5px; border: 2px solid var(--color-secondary); } /* Content */ body.camp #container { padding-top: 0; } body.camp #content { padding-top: 0; padding-bottom: 0; background: var(--color-secondary); } /* Slide */ body.camp #content .camp_slide { height: 90vh; position: relative; overflow: hidden; } body.camp #content .camp_slide .image { width: 100%; height: 100%; left: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; opacity: 0; -ms-transform: scale(1.5,1.5); -webkit-transform: scale(1.5,1.5); transform: scale(1.5,1.5); } body.camp.is-loaded #content .camp_slide .image { opacity: 1; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); } body.camp #content .camp_slide .numbers { width: 320px; height: 0; margin: auto; padding: 20px; background: var(--color-primary); opacity: 0; } body.camp.is-loaded #content .camp_slide .numbers { height: 450px; opacity: 1; } body.camp #content .camp_slide .numbers .title { padding: 0 20px 10px; font-size: 14px; font-weight: 700; line-height: 20px; border-bottom: 1px solid rgba(255,255,255,0.3); position: relative; z-index: 2; } body.camp #content .camp_slide .numbers .counts { width: 100%; left: 0; top: 60px; bottom: 80px; position: absolute; z-index: 1; } body.camp #content .camp_slide .numbers .counts .part { margin: 20px 0; } body.camp #content .camp_slide .numbers .counts .part .counter { font-size: 100px; line-height: 1; display: block; opacity: 0; } body.camp #content .camp_slide .numbers .counts .part .text { padding: 0 10px; font-size: 25px; font-weight: 700; line-height: 1; display: block; } body.camp #content .camp_slide .numbers .scroll_down { left: 50%; bottom: -40px; margin-left: -25px; position: absolute; z-index: 2; } /* Video */ body.camp #content .video { padding: 50px 0; background: var(--color-silver); } body.camp #content .video h3 { margin-bottom: 30px; } body.camp #content .video a { display: inline-block; position: relative; } body.camp #content .video a .cover { width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(39,40,45,0.3); background-image: url(images/icon_play_white.svg); background-repeat: no-repeat; background-position: center; background-size: 120px; position: absolute; z-index: 2; opacity: 0.5; } body.camp #content .video a:hover .cover { background-color: rgba(39,40,45,0.5); background-size: 100px; opacity: 1; } body.camp #content .video a img { max-width: 100%; height: auto; display: block; position: relative; z-index: 1; } /* Info blocks */ body.camp #content .info_block { padding: 100px 0; } body.camp #content .info_block sup { top: -0.5em; font-size: 75%; line-height: 0; vertical-align: baseline; position: relative; } /* Info block 1 */ body.camp #content .info_block_1 { background-color: var(--color-primary); background-image: url(images/bgr_camp_block1__01.png), url(images/bgr_camp_block1__02.png), url(images/bgr_camp_block1__03.png); background-repeat: no-repeat; background-position: 5% 70%, 95% 10%, 85% 90%; background-size: auto; } body.camp #content .info_block_1 .row .col { margin-top: 50px; } body.camp #content .info_block_1 .row .col:nth-child(-n+2) { margin-top: 0; } body.camp #content .info_block_1 .row .col:nth-child(2n+1) { padding-right: 20px; } body.camp #content .info_block_1 .row .col:nth-child(2n) { padding-left: 20px; } body.camp #content .info_block_1 .row .col .title { margin-bottom: 10px; padding-bottom: 10px; font-size: 20px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.3); } /* Info block 2 */ body.camp #content .info_block_2 .col_left { padding-right: 20px; } body.camp #content .info_block_2 .col_right { padding-left: 20px; } /* Info block 3 */ body.camp #content .info_block_3 { color: white; background: var(--color-secondary) url(images/bgr_camp_block3.png) repeat center; } body.camp #content .info_block_3 .title { margin-bottom: 20px; font-size: 14px; font-weight: 700; border-bottom: 1px solid #000; } body.camp #content .info_block_3 .col_info { padding: 25px; color: #000; background: white; } body.camp #content .info_block_3 .col_dates { padding: 25px; background: #313237; } body.camp #content .info_block_3 .col_dates .title { border-bottom-color: rgba(255,255,255,0.3); } body.camp #content .info_block_3 .col_places { padding: 25px; color: #000; background: var(--color-primary); } /* Teachers */ body.camp #content .teachers { padding: 70px 0; color: white; background: #000; } body.camp #content .teachers .teachers_wrapper { margin-left: -10px; margin-right: -10px; font-size: 0; } body.camp #content .teachers .teachers_wrapper .teacher { width: 33.3333333333%; margin-bottom: 20px; padding-left: 10px; padding-right: 10px; font-size: 16px; vertical-align: top; color: #999; display: inline-block; } body.camp #content .teachers .teachers_wrapper .teacher .image { margin-bottom: 20px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } body.camp #content .teachers .teachers_wrapper .teacher .image:before { padding-top: 80%; display: block; content: ' '; } body.camp #content .teachers .teachers_wrapper .teacher .name { font-size: 20px; font-weight: 700; color: white; line-height: 1; } /* --------------- FOOTER --------------- */ #footer { font-size: 17px; color: var(--color-secondary); } #footer a { color: var(--color-secondary); } #footer a:hover { text-decoration: underline; color: #000; } /* Footer top */ #footer .footer_top ul { padding: 20px 0; font-size: 0; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; display: inline-block; } #footer .footer_top ul li { margin: 0 25px; font-size: 17px; vertical-align: top; display: inline-block; } /* Footer bottom */ #footer .footer_bottom { padding: 70px 0; border-bottom: 10px solid var(--color-primary); } #footer .footer_bottom .logo { margin-bottom: 50px; display: inline-block; } #footer .footer_bottom .logo img { width: auto; height: 80px; display: inline-block; } #footer .footer_bottom .contact { margin-bottom: 40px; } #footer .footer_bottom .footer_content { margin-bottom: 30px; } /* Social media */ #footer .footer_bottom .social_media { margin-bottom: 30px; font-size: 0; } #footer .footer_bottom .social_media a { width: 50px; height: 50px; margin: 0 5px; padding-top: 12px; vertical-align: top; background: var(--color-primary); display: inline-block; } #footer .footer_bottom .social_media a:hover { background: var(--color-secondary); } #footer .footer_bottom .social_media a svg { width: auto; height: 26px; fill: #000; } #footer .footer_bottom .social_media a:hover svg { fill: white; } /* Barion */ #footer .footer_bottom .barion img { max-width: 100%; height: auto; margin: auto; display: block; } /* -------------- FORM -------------- */ .wpcf7-form { color: white; } .form-row { margin-bottom: 20px !important; } .form-row.form-row-first { width: 48%; float: left; } .form-row.form-row-last { width: 48%; float: right; } .form-row.form-row-wide { width: 100%; float: none; clear: both; } .form-row .row .col { padding-left: 20px; } .form-row a { text-decoration: underline; color: white; } .form-row a:hover { text-decoration: none; } .form-row br { display: none; } .form-row label { margin-bottom: 5px; font-size: 15px; font-weight: 700; text-align: left; color: white; line-height: 18px; display: block; } .form-row select, .form-row textarea, .form-row input[type=tel], .form-row input[type=text], .form-row input[type=email], .form-row input[type=number], .form-row input[type=password] { width: 100%; height: 50px; padding-left: 10px; color: white; background: transparent; border: 1px solid #4b4b55; position: relative; } .form-row select:focus, .form-row textarea:focus, .form-row input[type=tel]:focus, .form-row input[type=text]:focus, .form-row input[type=email]:focus, .form-row input[type=number]:focus, .form-row input[type=password]:focus { border-color: var(--color-primary); } .form-row select option { color: #000; } .form-row textarea { min-height: 150px; padding: 10px; resize: vertical; } /* Light */ .light .form-row a { color: #000; } .light .form-row label { color: var(--color-secondary); } .light .form-row select, .light .form-row textarea, .light .form-row input[type=tel], .light .form-row input[type=text], .light .form-row input[type=email], .light .form-row input[type=number], .light .form-row input[type=password] { color: #000; background: #f9f9f9; border-color: #ddd; } .light .form-row select:focus, .light .form-row textarea:focus, .light .form-row input[type=tel]:focus, .light .form-row input[type=text]:focus, .light .form-row input[type=email]:focus, .light .form-row input[type=number]:focus, .light .form-row input[type=password]:focus { background: white; border-color: #4b4b55; } /* WP CF 7 */ .wpcf7-form .wpcf7-checkbox .wpcf7-list-item { margin: 0; display: block; } .wpcf7-form .wpcf7-checkbox .wpcf7-list-item label { line-height: 30px; cursor: pointer; } .wpcf7-form .wpcf7-list-item { margin: 0 !important; } .wpcf7-form .ajax-loader { background-image: url(images/loader.gif) !important; } /* --------------- BOOKING --------------- */ .bookings .checkbox-radio-block { padding-left: 20px !important; line-height: 20px; display: block; position: relative; } .bookings .checkbox-radio-block input { left: 0; top: 3px !important; margin: 0 !important; position: absolute !important; } /* ------------------ KEYFRAMES ------------------ */ @-webkit-keyframes play { from { background-position: 0px; } to { background-position: -700px; } } @-moz-keyframes play { from { background-position: 0px; } to { background-position: -700px; } } @-ms-keyframes play { from { background-position: 0px; } to { background-position: -700px; } } @-o-keyframes play { from { background-position: 0px; } to { background-position: -700px; } } @keyframes play { from { background-position: 0px; } to { background-position: -700px; } } /* ------------------- RWD DESIGN ------------------- */ @media only screen and (max-width: 1600px) { /* HEADER */ #header { height: 120px; } /* HEADER: Logo */ #header .logo { left: 75px; } #header .logo img { height: 70px; } /* HEADER: Menu */ #header menu { right: 200px; } #header menu ul li { margin-left: 20px; } /* HEADER: Ajax cart */ #header .ajax_cart { right: 55px; } /* FRONTPAGE */ #frontpage { padding-top: 120px; } /* SLIDER */ #slider_contact #slider .slider_for { right: 200px; } #slider_contact #slider .slider_for .item .cover { padding-left: 75px; } #slider_contact #slider .slider_for .item .cover .title { width: 50%; } #slider_contact #slider .slider_for .item .cover .text { width: 50%; } #slider_contact #slider .slider_nav { padding-left: 75px; } /* CONTENT */ #container { padding-top: 120px; } } @media only screen and (max-width: 1440px) { /* CAMP: Info block 2 */ body.camp #content .info_block_2 { padding-bottom: 450px !important; } } @media only screen and (max-width: 1280px) { /* HEADER */ #header { height: 100px; } /* HEADER: Logo */ #header .logo { left: 50px; } #header .logo img { height: 50px; } /* HEADER: Menu */ #header menu { right: 100px; } /* HEADER: Ajax cart */ #header .ajax_cart { right: 30px; } /* FRONTPAGE */ #frontpage { padding-top: 100px; } /* SLIDER */ #slider_contact { height: calc(100vh - 150px); } #slider_contact #slider .slider_for { right: 0; } #slider_contact #slider .slider_for:before { display: none; } #slider_contact #slider .slider_for .item .cover { padding-left: 50px; } #slider_contact #slider .slider_for .item .cover .title { width: 60%; } #slider_contact #slider .slider_for .item .cover .text { width: 60%; } #slider_contact #slider .slider_nav { padding-left: 50px; } /* CONTENT */ #container { padding-top: 100px; } } @media only screen and (max-width: 1200px) { /* DISPLAY: None */ .hide_in_1200 { display: none !important; } /* DEFAULT */ .p_l_30 { padding-left: 30px; } .p_r_30 { padding-right: 30px; } /* HEADER: Menu */ #header menu ul li { margin-left: 15px; } #header menu ul li a { font-size: 16px; } /* ABOUT US */ #aboutus .title { font-size: 6vw; } #aboutus .col_images .image1 { width: 90%; height: 70%; } #aboutus .col_images .iframe_wrapper { width: 100%; left: -30px; } /* WHAT REPRESENT */ #what_represent .box_wrapper .box { padding: 70px 30px; } #what_represent .box_wrapper .box .icon img { max-width: 100%; } /* APPLY */ #apply_testimonials .row { display: block; } #apply_testimonials:after { display: none; } #apply_testimonials .col_form, #apply_testimonials .col_testimonials { width: 100%; padding-left: 0; display: block; } #apply_testimonials .col_form .wrapper { max-width: none; padding: 70px 50px; float: none; } #apply_testimonials .col_testimonials .testimonials_wrapper { padding-left: 0; } /* NEWS */ #news { padding: 70px 0; } #news .title { max-width: none; } /* CONTENT: Points */ #content .points .point { padding-left: 0; } #content .points .point .text { width: 45%; padding: 30px; } #content .points .point.odd { padding-right: 0; } /* COTNENT: School */ #content .apply__prices .col_prices { padding: 30px; } /* CONTENT: Points 2 */ #content .points-2 .points_container { margin-left: -15px; margin-right: -15px; } #content .points-2 .point { margin-bottom: 30px; padding-left: 15px; padding-right: 15px; } #content .points-2 .point .point_wrapper { padding: 120px 30px 30px; } #content .points-2 .point .point_wrapper .text h3 { font-size: 25px; } /* CONTENT: Contact */ #content .contact_wrapper .col_text .page_content { padding: 50px 30px; } #content .contact_wrapper .col_text .contact_details { padding: 50px 30px; } #content .contact_wrapper .col_contact_form { padding: 120px 30px 50px; } /* TIMETABLE: Course type */ #content .course_types .course_type_container { margin-left: -15px; margin-right: -15px; } #content .course_types .course_type { width: calc(33.3333333333% - 30px); margin: 30px 15px 0; } #content .course_types .course_type:nth-child(-n+3) { margin-top: 0; } #content .course_types .course_type .course_type_wrapper { padding: 120px 30px 30px; } #content .course_types .course_type .course_type_wrapper .text h3 { font-size: 25px; } /* CAMP: Info block 2 */ body.camp #content .info_block_2 { padding-bottom: 400px !important; } /* CAMP: Info block 3 */ body.camp #content .info_block_3 .row, body.camp #content .info_block_3 .col { width: 100%; display: block; } } @media only screen and (max-width: 960px) { /* DISPLAY: None */ .hide_in_960 { display: none !important; } /* DISPLAY: Block */ .show_in_960 { display: block !important; } /* DEFAULT */ body { overflow-y: auto; } .has_animation.anim_cubic { -webkit-transition: all 0 cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 0 cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 0 cubic-bezier(0.19, 1, 0.22, 1); transition: all 0 cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition-delay: 0 !important; -moz-transition-delay: 0 !important; -o-transition-delay: 0 !important; transition-delay: 0 !important; } /* HEADER: Logo */ #header .logo { opacity: 1; } /* HEADER: Alternative apply button */ #header .apply_alt_button { right: 170px; display: inline-block !important; } /* HEADER: Ajax cart */ #header .ajax_cart { right: 100px; opacity: 1; } /* SLIDER */ #slider_contact { height: auto; } #slider_contact #slider .slider_for { height: 600px; top: auto; right: auto; bottom: auto; left: auto; position: relative; opacity: 1; } #slider_contact #slider .slider_for:before { display: none; } #slider_contact #slider .slider_for .item .cover { padding-left: 20px; padding-right: 20px; text-align: center; } #slider_contact #slider .slider_for .item .cover .title { width: 100%; } #slider_contact #slider .slider_for .item .cover .text { width: 100%; } #slider_contact #slider ul.slick-dots { width: 100%; left: 0; bottom: 20px; text-align: center; position: absolute; } #slider_contact #slider ul.slick-dots li { margin: 0 10px; vertical-align: top; display: inline-block; } #slider_contact #slider ul.slick-dots li button { width: 30px; height: 4px; text-indent: -9999px; background: white; cursor: pointer; } #slider_contact #slider ul.slick-dots li.slick-active button { background: var(--color-primary); } /* ABOUT US */ #aboutus .row { display: block; } #aboutus .col { width: 100%; display: block; } #aboutus .title { font-size: 7vw; } #aboutus .text { padding-right: 0; } #aboutus .col_images .iframe_wrapper { width: 100%; left: auto; bottom: auto; position: relative; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* WHAT REPRESENT */ #what_represent .box_wrapper .box { padding: 70px 30px; } #what_represent .box_wrapper .box .icon img { max-width: 100%; } /* APPLY */ #apply_testimonials .col_form .wrapper { padding: 50px; } /* NEWS */ #news { padding: 50px 0; } #news .title { max-width: none; } .news_list { margin-left: -15px; margin-right: -15px; } .news_list article { width: 50%; padding-left: 15px; padding-right: 15px; } .news_list article:nth-child(3) { margin-top: 40px; } .news_list article .wrapper .entry a { font-size: 25px; } body.home .news_list article:nth-child(3) { display: none; } /* GALLERY */ #gallery { padding-top: 75px; } #gallery.in_page { padding-top: 0; } /* CONTENT: Points */ #content .points .point { margin-bottom: 30px; padding-left: 0; padding-bottom: 0; padding-right: 0; } #content .points .point .text { width: calc(100% - 60px); right: auto; bottom: auto; margin: -50px auto 0; padding: 50px; position: relative; } #content .points .point.odd { padding-left: 0; padding-right: 0; } #content .points .point.odd .text { left: auto; } /* CONTENT: Points 2 */ #content .points-2 .point { width: 50%; } #content .points-2 .point .point_wrapper .text h3 { font-size: 30px; } /* CONTENT: School */ #content .apply__prices .col_form .wrapper { max-width: none; padding: 50px 0; } #content .apply__prices .col_prices { padding: 50px; } /* CONTENT: Services */ #content .services_wrapper .service { width: 33.3333333333%; } /* CONTENT: Contact */ #content .contact_wrapper { background: transparent; } #content .contact_wrapper .col { width: 100%; display: block; } #content .contact_wrapper .col_text .page_content { padding: 0 30px 30px; } #content .contact_wrapper .col_text .contact_details { padding: 30px; } #content .contact_wrapper .col_contact_form { padding: 30px; background: var(--color-secondary); } #content .contact_wrapper .col_contact_form:before { display: none; } /* TIMETABLE: Course type */ #content .course_types .course_type { width: calc(50% - 30px); } #content .course_types .course_type:nth-child(3) { margin-top: 30px; } #content .course_types .course_type .course_type_wrapper .text h3 { font-size: 30px; } /* CONTENT: New timatable */ .timetable_place h3 { margin-bottom: 20px !important; } .timetable_place .new_timetable_wrapper { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; display: block; } .timetable_place .new_timetable_wrapper .day { width: 100%; padding-left: 0; padding-right: 0; display: block; } .timetable_place .new_timetable_wrapper .day .wrapper h4 { text-align: center; } .timetable_place .new_timetable_wrapper .day .lesson { text-align: center; } /* CAMP: Info blocks */ body.camp #content .info_block { padding: 70px 0; } /* CAMP: Info block 2 */ body.camp #content .info_block_2 { padding-bottom: 300px !important; } /* CAMP: Teachers */ body.camp #content .teachers { padding: 50px 0; } body.camp #content .teachers .teachers_wrapper .teacher { width: 50%; } body.camp #content .teachers .teachers_wrapper .teacher .name { font-size: 18px; } /* SCHOOL */ body.school #content .row .col { width: 100%; display: block; } body.school #content .row .col_text { padding-right: 0; } body.school #content .row .col_banners a { width: calc(50% - 10px); } body.school #content .row .col_banners a:nth-child(1) { margin-left: 0; margin-right: 10px; } body.school #content .row .col_banners a:nth-child(2) { margin-left: 10px; margin-right: 0; } /* SCHOOL: Teachers */ body.school #content .teachers { padding: 50px 0; } body.school #content .teachers .teachers_wrapper .teacher { width: 50%; } body.school #content .teachers .teachers_wrapper .teacher .name { font-size: 18px; } /* APPLY AND PRICES */ #apply-and-prices .row .col { width: 100%; display: block; } #apply-and-prices .row .col_text { padding-right: 0; } } @media only screen and (max-width: 768px) { /* DEFAULT */ .p_l_30 { padding-left: 20px; } .p_r_30 { padding-right: 20px; } /* DISPLAY: None */ .hide_in_768 { display: none !important; } /* DISPLAY: Block */ .show_in_768 { display: block !important; } /* MODAL */ .white-popup.exitpopup .mfp-close { right: 20px; } /* NAVIGATION */ #rwd_menu { top: 80px; padding: 30px 20px; } /* HEADER */ #header { height: 80px; } body.fixed_header #header { height: 80px; } /* HEADER: Logo */ #header .logo { left: 20px; } /* FRONTPAGE */ #frontpage { padding-top: 80px; } body.fixed_header #frontpage { padding-top: 80px; } /* SLIDER */ #slider_contact #slider .slider_for { height: 500px; } #slider_contact #slider .slider_for .item .cover .title { font-size: 9vw; } #slider_contact #slider .slider_for .item .cover .text { margin: 20px 0; font-size: 17px; } /* ABOUT US */ #aboutus { padding: 50px 0; } #aboutus:after { display: none; } #aboutus .title { font-size: 8vw; } #aboutus .title.inline_block { margin-top: 50px; } #aboutus .text { padding-right: 0; } /* WHAT REPRESENT */ #what_represent:before { display: none; } #what_represent .box_wrapper .row { display: block; } #what_represent .box_wrapper .box { width: 100% !important; padding: 20px; border-right: none; border-bottom: 1px solid #d9d9d9; display: block; } #what_represent .box_wrapper .box:last-child { border-bottom: none; } #what_represent .box_wrapper .box .icon { height: 140px; } /* APPLY */ #apply_testimonials .col_form .wrapper { padding: 30px; } #apply_testimonials .col_testimonials .testimonials_wrapper .item { padding: 30px; color: white; } #apply_testimonials .col_testimonials .testimonials_wrapper .testimonials ul.slick-dots { margin-left: 30px; } /* NEWS */ #news { padding: 30px 0; } #news .title { font-size: 7vw; } /* GALLERY */ #gallery { padding: 20px 0; } #gallery.in_page { padding-top: 0; } #gallery .slick-slide { padding: 0 20px; } #gallery .controls button { right: 40px; } #gallery .controls button.prev { left: 40px; right: auto; } /* CONTENT */ #container { padding-top: 80px; } body.fixed_header #container { padding-top: 80px; } /* CONTENT: School */ #content .apply__prices .col_form .wrapper { max-width: none; padding: 30px 0; } #content .apply__prices .col_prices { padding: 30px; } /* CONTENT: Services */ #content .services_wrapper .service { width: 50%; } /* CONTENT: Points 2 */ #content .points-2 .points_container { margin-left: 0; margin-right: 0; } #content .points-2 .point { width: 100%; top: 0; padding-left: 0; padding-right: 0; } #content .points-2 .point .point_wrapper .text { min-height: inherit; } /* CONTENT: Timetable tab nav */ .timetable .tabnav ul li { width: 100%; padding: 0; display: block; } /* CONTENT: Timetable */ table.timetable { width: 100%; display: block; } table.timetable thead { display: none !important; } table.timetable tbody, table.timetable tbody tr, table.timetable tbody tr td { width: 100% !important; text-align: left !important; display: block; } table.timetable tbody tr td { padding: 3px 5px !important; } table.timetable tbody td::before { font-weight: 700; display: block; content: ''; } table.timetable tbody td:nth-child(1)::before { content: 'IDŐPONT'; } table.timetable tbody td:nth-child(2)::before { content: 'HÉTFŐ - SZERDA'; } table.timetable tbody td:nth-child(3)::before { content: 'KEDD - CSÜTÖRTÖK'; } table.timetable tbody td:nth-child(4)::before { content: 'PÉNTEK'; } /* CONTENT: Contact */ #content .contact_wrapper .col_text .page_content { padding: 0 20px 30px; } #content .contact_wrapper .col_text .contact_details { padding: 30px 20px; } #content .contact_wrapper .col_contact_form { padding: 30px 20px; } /* TIMETABLE: Course type */ #content .course_types .course_type_container { margin-left: 0; margin-right: 0; } #content .course_types .course_type { width: 100%; top: 0; margin-left: 0; margin-right: 0; } #content .course_types .course_type:nth-child(2) { margin-top: 30px; } #content .course_types .course_type .course_type_wrapper .text { min-height: inherit; } #content .course_types .adjust, #content .course_types .continued { display: none !important; } /* SERVICES */ #clients { padding: 30px 0; } #clients .clients_container .client { width: 50%; } /* CAMP: Slide */ body.camp.is-loaded #content .camp_slide .numbers { height: 400px; } body.camp #content .camp_slide .numbers .counts .part .counter { font-size: 80px; } body.camp #content .camp_slide .numbers .counts .part .text { font-size: 20px; } /* CAMP: Info blocks */ body.camp #content .info_block { padding: 50px 0; } /* CAMP: Info block 1 */ body.camp #content .info_block_1 .row .col { width: 100%; margin-top: 30px !important; display: block; } body.camp #content .info_block_1 .row .col:first-child { margin-top: 0 !important; } body.camp #content .info_block_1 .row .col:nth-child(2n+1) { padding-right: 0; } body.camp #content .info_block_1 .row .col:nth-child(2n) { padding-left: 0; } /* Info block 2 */ body.camp #content .info_block_2 { padding-bottom: 200px !important; } body.camp #content .info_block_2 .col { width: 100%; display: block; } body.camp #content .info_block_2 .col_left { padding-right: 0; } body.camp #content .info_block_2 .col_right { padding-left: 0; } } @media only screen and (max-width: 640px) { /* SLIDER */ #slider_contact #slider .slider_for { height: 400px; } #slider_contact #slider .slider_for .item .cover .title { font-size: 10vw; } /* ABOUT US */ #aboutus { padding: 30px 0; } #aboutus .title { font-size: 9vw; } #aboutus .title.inline_block { margin-top: 30px; } /* NEWS */ #news .title { font-size: 8vw; } .news_list article .wrapper .entry { padding: 20px; } .news_list article .wrapper .entry a { font-size: 22px; } .news_list article .wrapper .entry .datetime { padding-left: 0; border-left: none; } /* CONTENT: Points */ #content .points .point { margin-bottom: 20px; } #content .points .point .text { width: 100%; margin: 0; padding: 30px; } /* CONTENT: School */ #content .apply__prices.p_t_b_50 { padding-top: 30px; padding-bottom: 30px; } /* CONTENT: Fullwidth gallery */ .fullwidth_gallery { height: 400px; margin-bottom: 30px; } /* FOOTER: Footer top */ #footer .footer_top ul li { margin: 0; display: block; } /* FORM */ .form-row.form-row-first, .form-row.form-row-last { width: 100%; float: none; } .form-row .col_33 { width: 100%; margin-bottom: 20px; display: block; } .form-row .col_33:last-child() { margin-bottom: 0; } } @media only screen and (max-width: 480px) { /* MODAL */ .white-popup.exitpopup .wrapper.has_image { display: block; } .white-popup.exitpopup .wrapper.has_image .image { display: none !important; } .white-popup.exitpopup .wrapper.has_image .content { width: 100%; display: block; } /* NAVIGATION */ #rwd_menu .button { width: 100%; padding: 0; display: block; } /* HEADER: Alternative apply button */ #header .apply_alt_button { display: none !important; } /* SLIDER */ #slider_contact #slider .slider_for { height: 300px; } #slider_contact #slider .slider_for .item .cover .title { font-size: 11vw; } /* ABOUT US */ #aboutus .title { font-size: 10vw; } #aboutus .text { margin-bottom: 30px; padding-left: 0; border-left: none; } /* ABOUT US: Timetable tab nav */ .timetable .tabnav { padding-top: 0; border: 1px solid var(--color-primary); } .timetable .tabcontent { padding: 30px 0; } /* NEWS */ #news .title { font-size: 9vw; } .news_list { margin-left: 0; margin-right: 0; } .news_list article { width: 100%; padding-left: 0; padding-right: 0; display: block; } .news_list article:nth-child(2) { margin-top: 40px; } .news_list article .wrapper .entry { min-height: inherit; } .news_list article .wrapper .entry a { font-size: 25px; } body.home .news_list article:nth-child(3) { display: block; } /* CONTENT: Fullwidth gallery */ .fullwidth_gallery { height: 300px; } /* SCHOOL */ body.school #content .row .col_banners a { height: 250px; } body.school #content .row .col_banners a:before { top: 20px; } body.school #content .row .col_banners a { font-size: 25px; } body.school #content .row .col_banners a span { left: 20px; bottom: 20px; } /* SCHOOL: Teachers */ body.school #content .teachers .teachers_wrapper { margin-left: 0; margin-right: 0; } body.school #content .teachers .teachers_wrapper .teacher { width: 100%; padding-left: 0; padding-right: 0; display: block; } /* SERVICES */ #clients .clients_container .client { width: 100%; display: block; } /* CAMP: Slide */ body.camp #content .camp_slide .numbers { width: 80%; } body.camp.is-loaded #content .camp_slide .numbers { height: 350px; } body.camp #content .camp_slide .numbers .counts .part .counter { font-size: 60px; } /* CONTENT: Search */ #content form.search { padding: 10px; } #content form.search input[type=text] { font-size: 16px; } /* FORM */ .wpcf7-form .button { width: 100%; padding: 0; display: block; } } @media only screen and (max-width: 320px) { /* Alternative apply button */ #header .apply_alt_button { padding: 0 10px; font-size: 13px !important; } /* FORM */ .form-row select, .form-row textarea, .form-row input[type=tel], .form-row input[type=text], .form-row input[type=email], .form-row input[type=number], .form-row input[type=password] { padding-left: 0; } }