:root { --color-survey-red: #c60649; --color-survey-red-a40: rgba(248 8 93 / 40%); --color-survey-light-red: #fed2e2; --color-survey-blue: #2a3774; --color-survey-light-blue: #a3b4cc; --color-survey-turquoise: #02caca; --color-survey-silver-line: #bac3d6; --color-text: #62748e; --color-red: #c60649; --color-red-a10: rgba(198 6 73 / 10%); --color-dark: #091c2e; --color-dark-end: #11444a; --color-silver: #f5f5f5; --color-gray: #dddddd; --color-blue: #2860e1; --color-turquoise: #02caca; } ::-moz-placeholder { color: #999; } ::-ms-input-placeholder { color: #999; } ::-webkit-input-placeholder { color: #999; } html, body { min-height: 100%; } body { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #555971; line-height: 25px; background: #f7f7f7; } body.rwd_menu__opened { overflow: hidden; } .hidden { display: none!important; } #container.survey { color: black; background: #f3f4f8; background-size: contain; position: relative; z-index: 0; } #container.survey .circle { width: 400px; height: 400px; left: -20%; top: -10%; background: url(../img/survey/circle.svg) no-repeat center; background-size: auto 100%; position: fixed; z-index: -1; opacity: 20%; } #container.survey .break { height: 0; flex-basis: 100%; } #container.survey #content { padding-top: 50px; padding-bottom: 50px; } /* INTRO */ #container.survey .survey_intro { margin-bottom: 50px; } #container.survey .survey_intro .survey_intro_title { margin-bottom: 30px; font-size: 60px; font-weight: 700; line-height: 120%; } #container.survey .survey_intro .survey_intro_title span { color: var(--color-survey-red); position: relative; z-index: 0; } #container.survey .survey_intro .survey_intro_title span:before { width: calc(100% + 20px); height: calc(100% + 20px); left: -10px; top: -10px; background: url(../img/survey/icon_oval_red_3.svg) no-repeat bottom center; background-size: contain; position: absolute; z-index: -1; content: ''; } #container.survey .survey_intro .survey_intro_title span.oval_2:before { background-image: url(../img/survey/icon_oval_red_4.svg); } #container.survey .survey_intro .survey_intro_title .icons { width: 70px; height: 70px; top: 10px; margin-left: -6px; margin-right: 8px; background: rgba(0 0 0 / 10%); display: inline-block; position: relative; border-radius: 50%; overflow: hidden; } #container.survey .survey_intro .survey_intro_title .icons .image { width: 350px; height: 70px; background: url(../img/survey/icon_users.png) no-repeat left top; background-size: auto 100%; -webkit-animation: play 5s steps(5) infinite; animation: play 5s steps(5) infinite; } @-webkit-keyframes play { from { background-position: 0px; } to { background-position: -350px; } } @keyframes play { from { background-position: 0px; } to { background-position: -350px; } } #container.survey .survey_intro .survey_intro_text { margin-bottom: 20px; padding: 16px; font-size: 14px; line-height: 140%; background: white; border-radius: 10px; box-shadow: rgba(186 195 214 / 50%) 0px 0px 0px 1px, rgba(186 195 214 / 50%) 0px 2px 0px 1px, rgba(186 195 214 / 25%) 0px 16px 40px 1px; } #content h2 { margin-bottom: 20px; font-size: 30px; font-weight: 700; color: #333; line-height: 1.2; } .package_hero .button.button_empty { color: #ffffff !important; box-shadow: none; } /* PROGRESS BAR */ #progress_bar { margin-bottom: 50px; } #progress_bar .count { font-size: 14px; font-weight: 700; text-transform: uppercase; } #progress_bar .status { height: 20px; padding: 5px; background: white; border-radius: 10px; } #progress_bar .status div { width: 0; height: 10px; background: var(--color-survey-turquoise); border-radius: 5px; } /* QUESTIONS */ #container.survey .questions { padding-bottom: 100px; } #container.survey .questions h2 { font-size: 24px !important; color: var(--color-survey-blue) !important; font-weight: 700;} #container.survey .questions .question { position: relative; } #container.survey .questions .question ul { margin-left: 0 !important; display: flex; justify-content: space-between; list-style: none !important; } #container.survey .questions .question ul li { width: calc(50% - 10px); margin-top: 20px; font-weight: 700; color: var(--color-survey-blue); line-height: 20px; list-style: none !important; } #container.survey .questions .question ul li:nth-child(-n+2) { margin-top: 0; } #container.survey .questions .question ul li label { padding: 20px 20px 20px 50px; background: #e5e8ef; display: block; position: relative; border-radius: 5px; cursor: pointer; } #container.survey .questions .question ul li label input { left: 20px; top: 20px; margin-top: 0 !important; position: absolute; } #container.survey .questions .question .button.disable { background: var(--color-survey-silver-line) !important; cursor: not-allowed; } /* PACKAGES */ #container.survey .recommended_package { display: none; } #container.survey .recommended_package section { display: none; } #container.survey .recommended_package .package_hero { min-height: 400px; margin-bottom: 50px; padding: 50px 40% 50px 50px; color: white; background: url(../img/survey/bgr-nagyvallalati-csomag.png) no-repeat center; background-size: cover; border-radius: 10px; display: flex; align-items: center; align-content: center; position: relative; } #container.survey .recommended_package .package_hero h2 { margin-bottom: 30px !important; color: white; line-height: 120% !important; } #container.survey .recommended_package .package_hero p { margin-bottom: 30px !important; } #container.survey .recommended_package .package_hero p:last-child { margin-bottom: 0 !important; } #container.survey .recommended_package #mini-csomag .package_hero { background-image: url(../img/survey/bgr-mini-csomag.png) !important; } #container.survey .recommended_package #kozepes-csomag .package_hero { background-image: url(../img/survey/bgr-kozepes-csomag.png) !important; } #container.survey .recommended_package #premium-csomag .package_hero { background-image: url(../img/survey/bgr-premium-csomag.png) !important; } /* PACKAGE CONTENT */ #container.survey .package_content { margin-bottom: 50px; } /* PACKAGE PARTNERS */ #container.survey .package_partners .grid_wrap { display: flex; } #container.survey .package_partners .grid_wrap .grid_item { width: 25%; height: 300px; border-right: 1px solid var(--color-survey-silver-line); border-top: 1px solid var(--color-survey-silver-line); position: relative; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(-n+3) { border-top: none; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(3) { width: 50%; border-right: none; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(3) { width: 50%; border-right: none; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(4) { width: 50%; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(5) { width: 50%; border-right: none; } #container.survey .package_partners .grid_wrap .grid_item img { width: 100%; max-width: 150px; height: auto; max-height: 70px; left: 50%; top: 50%; position: absolute; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #container.survey .package_partners .grid_wrap .grid_item .grid_item_wrap { width: 100%; height: 100%; padding: 20px; position: relative; z-index: 2; } #container.survey .package_partners .grid_wrap .grid_item .grid_item_wrap:before { width: 100%; height: 0; left: 0; top: 0; background: white; position: absolute; content: ''; z-index: -1; } #container.survey .package_partners .grid_wrap .grid_item .grid_item_wrap .partner_title { margin-bottom: 10px; padding-bottom: 10px; font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--color-survey-blue); position: relative; opacity: 0%; } #container.survey .package_partners .grid_wrap .grid_item .grid_item_wrap .partner_title:before { width: 0; height: 1px; left: 0; bottom: 0; background: var(--color-survey-silver-line); position: absolute; content: ''; } #container.survey .package_partners .grid_wrap .grid_item .grid_item_wrap .partner_desc { font-size: 15px; color: black; position: relative; opacity: 0%; } #container.survey .package_partners .grid_wrap .grid_item:hover .grid_item_wrap:before { height: 100%; } #container.survey .package_partners .grid_wrap .grid_item:hover .partner_title { opacity: 100%; } #container.survey .package_partners .grid_wrap .grid_item:hover .partner_title:before { width: 100%; } #container.survey .package_partners .grid_wrap .grid_item:hover .partner_desc { opacity: 100%; } #container.survey .package_partners .grid_wrap .grid_item .anim, #container.survey .package_partners .grid_wrap .grid_item :before { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* FORM */ .contact_form_wrap { display: flex; justify-content: space-between; } .contact_form_wrap .form_row { width: 100%; } .contact_form_wrap .form_row.form_row_first, .contact_form_wrap .form_row.form_row_last { width: calc(50% - 10px); } .contact_form_wrap .form_row.form_privacy_policy { padding-left: 30px; position: relative; } .contact_form_wrap .form_row.form_privacy_policy input { left: 0; top: 0; margin-top: 3px !important; position: absolute; } .contact_form_wrap .form_row.form_privacy_policy label { font-weight: normal !important; cursor: pointer; } input, button { -webkit-appearance: none; } input, button, textarea, select { font-family: 'Open Sans', sans-serif; font-size: 16px; outline: none; } input[type="checkbox"]:not(.ios_switch), input[type="radio"]:not(.ios_switch) {width: 20px;min-width: 20px;height: 20px;margin: -4px 4px 0 0 !important;padding: 0 !important;text-align: center !important;background-color: #fff;border: 1px solid #d9d9d9;clear: none;cursor: pointer;display: inline-block !important;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"]:not(.ios_switch) { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } input[type="radio"]:not(.ios_switch):checked:before { width: 10px; height: 10px; left: 4px; top: 4px; background: var(--color-red); position: relative; display: block; text-align: center; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } input[type="checkbox"]:not(.ios_switch):checked:before { width: 18px; height: 18px; left: 0px; top: 0px; color: #02caca; line-height: 18px; position: relative; display: block; text-align: center; content: '✔'; } input.switch { width: 50px; height: 30px; position: relative; outline: none; background-color: #f7f7f7; border: 1px solid #d9dadc; border-radius: 15px; box-shadow: inset -20px 0 0 0 #fff; -webkit-appearance: none; } input.switch:before { display: none !important; } input.switch:after { width: 26px; height: 26px; left: 1px; top: 1px; background: transparent; position: absolute; content: ''; border-radius: 50%; box-shadow: 2px 4px 6px rgba(0,0,0,0.2); } input.switch:checked { border-color: #4ed164; box-shadow: inset 20px 0 0 0 #4ed164; } input.switch:checked:after { left: 0px; box-shadow: -2px 4px 3px rgba(0,0,0,0.05); } .package_hero a.button { margin: 4px 0; } /* ----------- RWD ----------- */ @media only screen and (max-width: 960px) { /* INTRO */ #container.survey .survey_intro .survey_intro_title { font-size: 40px; } /* PACKAGES */ #container.survey .recommended_package .package_hero { padding: 30px 40% 30px 30px; } /* PACKAGE PARTNERS */ #container.survey .package_partners .grid_wrap .grid_item { width: 50%; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(2) { border-right: none; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(3) { border-top: 1px solid var(--color-survey-silver-line); border-right: 1px solid var(--color-survey-silver-line); } #container.survey .package_partners .grid_wrap .grid_item:nth-child(4) { border-right: none; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(5) { width: 100%; } } @media only screen and (max-width: 768px) { /* QUESTIONS */ #container.survey .questions .question ul li { width: 100%; } #container.survey .questions .question ul li:nth-child(2) { margin-top: 20px; } /* PACKAGES */ #container.survey .recommended_package .package_hero { padding: 0; background-position: right center; overflow: hidden; } #container.survey .recommended_package .package_hero .package_hero_cover { width: 100%; height: 100%; left: 0; top: 0; padding: 30px 20px; background: rgba(17 16 40 / 80%); display: flex; align-items: center; align-content: center; position: absolute; } /* PACKAGE PARTNERS */ #container.survey .package_partners .grid_wrap .grid_item { width: 100% !important; height: 250px; border-top: 1px solid var(--color-survey-silver-line) !important; border-right: none !important; } #container.survey .package_partners .grid_wrap .grid_item:nth-child(1) { border-top: none !important; } } @media only screen and (max-width: 640px) { /* INTRO */ #container.survey .survey_intro .survey_intro_title { font-size: 8vw; } #container.survey .survey_intro .survey_intro_title .icons { display: none !important; } } @media only screen and (max-width: 480px) { /* QUESTIONS */ #container.survey .questions .question .button { width: 100%; } }