html, body{ margin: 0px; text-align:center; background: #fff; height: 100%; font-family: Open Sans, sans-serif; font-size: 16px; min-width: 512px; color: #414141; scroll-behavior: smooth; display: flex; flex-direction: column; min-height: 100vh; } img{ border-width:0px; } .logo{ padding-top:10px; } .pointer{ cursor: pointer; } .right { float: right; } .left { float: left; } .full { width: 100%; -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; margin: 0px; padding: 0px; } .hiding{ opacity: 0 !important; } .hidden{ display: none !important; } .unvisible{ visibility: hidden !important; } .text_center { text-align: center !important; } .text_left { text-align: left !important; } #headerAndMyBody {min-height: 100%; min-width: 512px; width:100%;} nav{ height: 32px; } ul{ margin-top:0px; margin-bottom:0px; } h1,h2,h3, h4, h5{ margin:3px; } h1{ font-size:22pt; font-weight: 300; } section{ display: block; vertical-align: top; width: 100%; margin: 0; padding: 0px; background: none; } article{ text-align:justify; width: 512px; margin: 10px; padding: 10px; display: inline-block; vertical-align: top; } a{ color:#414141; } strong { font-weight: 700; } .message_ok, .message_ko{ width: 100%; margin-top: 15px; background: #6DAF36; padding: 10px 0px 10px 0px; color: #fff; box-shadow: 0px 3px 10px #ccc; } .message_ko{ background: #D84029; } header .left, footer .left{ float: left; margin: 0px; width: 170px; text-align: left; } header .right, footer .right{ float: right; margin: 3px 0px 0px 0px; width: 170px; text-align: right; } footer .left, footer .right{ width: 50%; min-width: 100px; } header .left img{ margin-right: 3px; } header .right .button_a{ width: auto; padding-left: 8px; padding-right: 8px; margin: 3px 0px 0px 7px; } header .input{ width: 60%; } header .button{ width: 101px; } header .button_a{ width: 205px; } header .button_a_50{ width: 99px; } header input{ margin-bottom: 5px; } .a_user_inner{ background: none; width: 201px; padding: 0px; margin:0px 0px 5px 0px; height: 20px; padding: 7px 4px 0px 4px; text-align:center; border-width:0px 0px 1px 0px; border-color: #414141; border-style: solid; } .a_bar, .a_bar_inner, .a_bar_time{ width:96px; height: 16px; padding:0px; margin: 0px; } .a_bar{ border: 1px solid #444; background:#444; margin: -1px 0px 0px 0px; } .a_bar_inner{ background:#888; border-width:0px; } .a_bar_time{ background: none; font-size:85%; text-align: center; position: relative; top: -120%; } ::-webkit-scrollbar { width: 16px; height: 10px; background: none; } ::-webkit-scrollbar-track { border-radius: 8px; } ::-webkit-scrollbar-thumb { background: #BCB5A4; border-radius: 0px; } .required { background-color: orange; } input, .input_val{ margin:0px; padding:0px; } .input, .input_val, .button, .button_a, .button_a_50, .input_sized, .input_select{ display: inline-block; font-family: inherit; border-style: solid; border-width: 1px; font-size:95%; } .input2{ display: none; } .input,.input_val, textarea, .input_sized, .input_select{ min-height: 24px; padding-left: 1%; padding-right: 1%; border-color: #ddd; } textarea{ resize: none; height: 128px; font-family: Open Sans, sans-serif; font-size: 14px; } .input:focus, textarea:focus{ border-color: #ddd; box-shadow: 0px 0px 10px #ddd; outline: none; } .input_select{ padding: 0px; } article table, article .input{ width: 98%; } article .input_select{ width: 100%; } .error{ box-shadow: 0px 0px 10px #fcc !important; border-color: #faa !important; } .button { cursor: pointer; width:auto; text-align:center; color:#fff; text-decoration:none; font-family: Open Sans, sans-serif; display: inline-block; margin: 3px; padding: 3px 8px 3px 8px; border: double; border-radius: 4px; border-color: #fff; background: #444; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .button:hover{ background: #eee; color: #222; border-color: #eee; } .button:active { } .note{ display:none; } .updateManySelected { box-shadow: inset 1px 1px 10px 3px orange; } .help{ text-align: left; border-color: #ABC1F4; border-width: 1px; border-style: solid; margin: 5px; background: #F3F6FD; color: #000; } .help h3, .help article{ border-width: 0px; border-style: solid; border-color: #ABC1F4; border-bottom-width: 1px; } .help h3{ margin: 1%; } .help article{ width: 30.5%; margin: 0.5%; padding: 0.5%; border-left-width: 1px; }  #menu, .a_menu, .mobile_menu, .a_menu_active { height: 104px; color: #000; line-height: 104px; } #menu { display: block; width: 94%; height: 60px; background: #191C21; position: fixed; top: 0px; left: 0px; text-align: right; padding: 0px 3% 0px 3%; border-bottom: solid 1px #000; z-index: 10; } #menu a { text-decoration: none; } .menu_group { height: auto; transition: height 0.5s ease-in-out; overflow: hidden; } .a_menu, .mobile_menu, .a_menu_active { width: auto; color: #fff; background: none; margin-bottom: 0px; padding-bottom: 0px; margin-top: 0px; padding-top: 0px; font-weight: 700; text-align: center; z-index: 999; } .a_menu:hover { text-decoration: underline; } #menu .logo { width: 120px; height: 29px; float: left; margin: 0px; padding: 0px; } .mobile_menu { display: none; text-decoration: none; -webkit-transition: background-image 0.2s ease-out; transition: background-image 0.2s ease-out; } .menu_group_button { background-position: center; background-image: url("../../img/core/m_menu.png"); background-repeat: no-repeat; } .menu_group_button_active { background-position: center; background-image: url("../../img/core/m_menu_close.png"); background-repeat: no-repeat; } @media screen and (max-width: 1400px) { .a_menu, .mobile_menu, .a_menu_active { padding: 0px; } } @media screen and (max-width: 1055px) { #menu a { width: 100%; display: block; margin: 0px; padding: 0px; } #menu .a_menu, #menu .a_menu_active { width: 100%; margin: 0px; padding: 0px; } #menu .a_menu:hover { background: #eee; } #menu .mobile_menu { display: inline-block; width: 30px; } #menu .mobile_menu img { vertical-align: middle; } } #myBody { margin-top: 60px; } .collage_section { display: flex; flex-wrap: wrap; justify-content: center; } .collage_box, .collage_box_w2, .collage_item { text-align: center; width: 384px; height: 768px; -webkit-flex-grow: 1; flex-grow: 1; max-width: 500px; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; line-height: 384px; } .collage_box, .collage_box_w2 { display: flex; flex-wrap: wrap; justify-content: center; } .collage_box_w2 { min-width: 500px; max-width: 1000px; -webkit-flex-grow: 2; flex-grow: 4; } .collage_item { height: 384px; color: #000; overflow: hidden; background-color: #fff; } .collage_item img{ width: 100%; } .collage_box_w2 .collage_item { height: 768px; line-height: 768px !important; max-width: 1000px; } .collage_content { font-family: Open Sans, sans-serif; display: inline-block; vertical-align: middle; text-align: left; width: 62%; line-height: 170%; font-size: 90%; } .collage_section h2{ margin: 0px; padding: 0px; } .collage_box_w2 h2{ margin-bottom: 15%; }  .slider { width: 100%; height: auto; display: flex; overflow-x: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .slider > div{ width: 100%; flex-shrink: 0; height: 100%; scroll-snap-align: start; } .slider_navigation > div{ display: inline-block; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; margin: 10px; opacity: 0.5; cursor: pointer; -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .slider_navigation > div:hover, .slider_navigation > .slider_navigation_active{ background: #fff; opacity: 1; } .slider_navigation { overflow: visible; height: 0px; position: relative; top: -60px; } .over { width: 100%; height: 0px; overflow: visible; position: relative; z-index: 1; }  h1, h2, h3 { font-weight: 300; } h2 { font-size: 200%; text-align: center; } p { text-align: center; } .link { text-decoration: none; cursor: pointer; } .link:hover { text-decoration: underline; } .dotted_link { color: #eb2e8b; border-bottom: 1px dotted #eb2e8b; text-decoration: none; } .dotted_link:hover { text-decoration: none; color: #000; border-color: #000; } #top { padding-top: 120px; } #midnight-blude-divider { padding: 80px 0; background-color: #3c194d; } .shadow { box-shadow: 0px 0px 35px 0px rgba(154,119,171,0.3); } .button { cursor: pointer; border-width: 3px; border-style: solid; border-color: #000; background-color: #000; color: #fff; padding: 5px 30px; font-weight: 700; font-size: 80%; text-transform: uppercase; min-height: 42px; line-height: 42px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease; } .button:hover { background-color: #fff; color: #000; border-color: #000; } .pink { border-color: #eb2e8b; background-color: #eb2e8b; } .pink:hover { background-color: #fff; color: #eb2e8b; border-color: #eb2e8b; } .purple { border-color: #4e2f5e; background-color: #4e2f5e; } .purple:hover { background-color: #fff; color: #4e2f5e; border-color: #4e2f5e; } .purple_inv { background-color: #fff; color: #4e2f5e; border-color: #4e2f5e; } .purple_inv:hover { background-color: #4e2f5e; color: #fff; border-color: #4e2f5e; } .orange_inv { background-color: #fff; color: #ff6709; border-color: #ff6709; } .orange_inv:hover { background-color: #ff6709; color: #fff; border-color: #ff6709; } .facebook_inv { background-color: #fff; color: #3b5998; border-color: #3b5998; } .facebook_inv:hover { background-color: #3b5998; color: #fff; border-color: #3b5998; } #menu, .a_menu, .mobile_menu, .a_menu_active { height: 126px; line-height: 126px; color: #000; background-color: #fff; font-weight: 400; font-size: 14.4px; } .a_menu_active::after, .a_menu:hover::after { content: ''; position: relative; top: -90px; width: 0px; height: 0px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #3C1A4D; } .menu_divider::after { display: none; } #menu { position: absolute; border:none; } .a_menu:hover, .a_menu_active{ text-decoration: none; font-weight: 700; } .menu_divider, .menu_divider:hover { text-decoration: none; font-weight: lighter; cursor: default; } #menu .logo { padding-left: 30px; padding-top: 28px; width:220px; height:70px; } .version { display: none; } #myBody { margin-top: 126px; } @media screen and (max-width: 1055px) { .menu_divider { display: none; } .a_menu_active::after, .a_menu:hover::after { display: none; } } .job_form { display: flex; flex-direction: column; padding-top: 40px; } #job_form_header p, h3 { margin: 0; padding: 0 0 20px 80px; text-align: left; } #job_form_header img { float: left; } #job_form_header { margin: 0 auto; display: flex; flex-direction: row; width: 80%; } .job_form span { font-size: 90%; font-style: italic; color: #717171; } .footer > div { width: 80%; margin: auto; height: 130px; line-height: 130px; vertical-align: middle; border-bottom: solid 1px #eaeaea; text-align: left; } .footer img { vertical-align: middle; margin: 0px; padding: 0px 10px; text-decoration: none; } .footer .link { padding: 10px; text-decoration: none; } .footer .menu_divider { font-weight: 600; } .footer { background-color: #eef3f7; padding: 0px; width: 100%; font-size: 12px; } .footer .copyright{ width: 350px; height: 40px; margin-top: 45px; } .footer .copyright p { text-align: right; line-height: normal; } @media screen and (max-width: 800px) { .footer > div { width: 100%; height: auto; } } #myBody { background-image: url("../../../img/beryko/bgbrands.jpg"); background-size: 100%; background-position: center; } h2 { margin: 60px; } em { background-color: #edeaef; border-radius: 30px; padding: 4px 15px; font-style: normal; white-space: nowrap; } em a { text-decoration: none; } .shadow { box-shadow: 0px 0px 35px 0px rgba(154, 119, 171, 0.3); } .block_1140 { width: auto; max-width: 1140px; min-height: 55px; line-height: 55px; padding: 40px 20px; background: #fff; text-align: center; } .block_1140 h2 { padding: 0px; margin: 0px; display: inline-block; } .block_1140 img { vertical-align: middle; } .block_1140 p { display: inline-block; margin: 0px 20px; } .block_text { max-width: 456px; line-height: 180%; text-align: left; } .block_purple { background: #4e2f5e; color: #fff; padding: 30px 0px; font-size: 16px; font-weight: 400; margin-top: -150px; } .block_purple h2, .block_purple p { text-align: left; max-width: 328px; margin: 0px; padding: 0px; line-height: normal; display: block; } .block_purple h2 { color: #eb2e8b; font-size: 48px; font-weight: 800; } .block_purple div { display: inline-block; margin: 0px 10px; width: 20%; vertical-align: top; } .block_purple .plus { color: #fff; display: inline-block; line-height: 55px; padding: 30px; padding-left: 10px; vertical-align: top; } @media screen and (max-width: 660px) { .block_purple .plus { display: none; } .block_purple div { width: 80%; } } h1 { font-size: 40px; color: #fff; } .beryko_header { background-image: url("../../img/beryko/bgheader.jpg"); width: auto; height: auto; padding: 100px; background-size: 100%; background-position: center; } .beryko_header img { max-height: 440px; } .beryko_header .over { text-align: center; } .beryko_header h1 { display: inline-block; max-width: 725px; } .beryko_header em { font-size: 23px; } .beryko_header .collage_item { max-width: 700px; max-height: 500px; height: 500px; font-size: 23px; color: #123466; } .beryko_header .collage_item img { max-height: 500px; height: 500px; min-height: auto; } .beryko_header_over { position: relative; top: -280px; background: none; } .beryko_header_over .a { position: relative; top: -100px; right: -50px; z-index: 3; } .beryko_header_over .b { position: relative; left: -70px; z-index: 2; max-width: 520px; max-height: 433px; padding-left: 50px; } .beryko_header_over .b p { line-height: 40px; } @media screen and (max-width: 823px) { .beryko_header_over .a { top: 0px; right: 0px; } .beryko_header_over .b { left: 0px; } } .brands { width: 70%; margin: auto; } .brands img { object-fit: contain; } .brands a { text-decoration: none; width: 380px; height: 120px; display: flex; overflow: hidden; justify-content: center; align-items: center; } .brands>div { padding-bottom: 40px; display: flex; flex-flow: row; flex-wrap: wrap; align-content: center; justify-content: center; } .brands div.remade { display: inline-block; } .brands .remade_logo_part_1 { width: 51px; height: 66px; } .brands .remade_logo_part_2 { width: 150px; height: 66px; filter: invert(1); } .about { color: #fff; font-size: 23px; font-weight: 300; line-height: 720px; background: url("../../img/beryko/bgabout.jpg"); height: 720px; margin: 40px 0px; } .about .about_text { line-height: 38px; display: inline-block; } .about h2 { font-size: 65px; color: #fff; } .about p { max-width: 800px; display: inline-block; } .partners { width: 80%; vertical-align: top; display: inline-block; background: none; padding-top: 0px; } .partner { width: 255px; height: 110px; border: solid 1px #edf2fa; background: #edf2fa; display: inline-block; margin: 10px; text-align: center; line-height: 110px; } .partner:hover { background: #fff; } .partner img { vertical-align: middle; width: 230px; max-height: 112px; object-fit: contain; } .partners_side { text-align: center; display: inline-block; overflow: visible; width: 0; } .partners_wrapper { margin-bottom: 70px; } .partners_side p { display: inline-block; background-repeat: no-repeat; background-position: 10 10; background-image: url("../../img/beryko/arrow_partners.png"); text-align: left; padding-top: 25px; padding-left: 30px; margin: 10px; width: 250px; transform: rotate(-5deg); font-size: 14.4px; font-family: Kavivanar, sans-serif; font-weight: 400; }  h2 { color: #000; padding: 20px; } .employees { justify-content: flex-start; } .employees .collage_item{ height: 320px; width: 320px; max-width: 400px; max-height: 400px; background-color: #fff; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease; border: solid 1px #fff; } .employees .collage_item:hover:not(#join_us):not(.social_employ) { background: url("../../img/beryko/bgquote.png") !important; background-position: 20% 20% !important; background-repeat: no-repeat !important; } .employee { display: none; width: 50%; height: 60%; } .employees .collage_item:hover .employee{ display: inline-block; text-align: left; } .employee p{ text-align: left; } .placeholder { background-color: #dbe2e6; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 1; -webkit-transition: height 0.5s; transition: height 0.5s; } .collage_item:hover .placeholder{ height: 0; } .collage_item:hover .placeholder p{ opacity: 0; } .placeholder p { color: #fff; font-weight: 700; font-size: 160%; text-transform: uppercase; } .placeholder b { font-size: 180%; } #join_us { background-color: #eb2e8b; text-decoration: none; color: #fff; display: flex; justify-content: center; align-items: center; } .social_employ img{ width: 48px; height: 48px; } .social_employ p{ padding-bottom: 40px; display: flex; align-items: center; text-align: left; font-size: 130%; font-weight: lighter; } .social_employ a{ text-decoration: none; } .invisible_item{ height: 1px; max-height: 1px !important; line-height: 1px; background: none; } .beryko_tym { height: auto; width: 100%; position: relative; } .beryko_tym img { height: auto; width: 100%; object-fit: scale-down; } .beryko_tym_text { position: absolute; bottom: 10%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; } .beryko_tym_text span { display: block; margin: auto; width: 80%; font-size: 40px; color: #ffffff; text-shadow: 1px 1px 20px #000; font-weight: 700; }