:root {
--gap: 2rem;
}
@media screen and (max-width: 768px) {
:root {
--gap: 1rem;
}
}
.content-box { width: 90%;
max-width: 1800px; margin: 0 auto;
}
body section.full-wide > .content-box {
width: 90%;
max-width: 1800px;
padding: 0;
margin: 0 auto;
}
.wide {
margin-left: calc(((100vw - 1400px + 1rem) / 2) * -1);
margin-right: calc(((100vw - 1400px + 1rem) / 2) * -1);
padding-left: calc((100vw - 1400px) / 2);
padding-right: calc((100vw - 1400px) / 2);
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
@media screen and (max-width: 1400px) {
.wide {
margin-left: calc(((100vw + 1rem) / 2) * -1);
margin-right: calc(((100vw + 1rem) / 2) * -1);
padding-left: calc((100vw + 1rem) / 2);
padding-right: calc((100vw + 1rem) / 2);
}
}
.vertical-center {
align-items: center;
}
.row {
width: calc(100% + var(--gap));
}
.offset-left {
padding-left: calc((100% - (1440px - 2rem)) / 2);
padding-right: 3rem;
}
.offset-right {
padding-right: calc((100% - (1440px - 2rem)) / 2);
padding-left: 3rem;
}
.object-fit {
object-fit: cover;
height: 100%;
}
.narrow {
max-width: 56rem;
margin: 0 auto;
}
.round {
border-radius: 50%;
}
@media screen and (max-width: 1440px) {
.offset-left {
padding-left: 1rem;
}
.offset-right {
padding-right: 1rem;
}
}
.row,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9 {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
clear: both;
}
.no-gap,
.no-gap.row {
gap: 0;
}
.no-gap.row {
width: 100%;
}
.col-1-2 {
width: calc(50% - var(--gap))
}
.col-1-3 {
width: calc(33.3333% - var(--gap))
}
.col-2-3 {
width: calc(66.6666% - var(--gap))
}
.col-1-4 {
width: calc(25% - var(--gap))
}
.col-3-4 {
width: calc(75% - var(--gap))
}
.col-1-5 {
width: calc(20% - var(--gap))
}
.col-2-5 {
width: calc(40% - var(--gap))
}
.col-3-5 {
width: calc(60% - var(--gap))
}
.col-4-5 {
width: calc(80% - var(--gap))
}
.col-1-6 {
width: calc(16.6667% - var(--gap))
}
.col-5-6 {
width: calc(83.3335% - var(--gap))
}
.no-gap .col-1-2 {
width: 50%
}
.no-gap .col-1-3 {
width: 33.3333%
}
.no-gap .col-2-3 {
width: 66.6666%
}
.no-gap .col-1-4 {
width: 25%
}
.no-gap .col-3-4 {
width: 75%
}
.no-gap .col-1-5 {
width: 20%
}
.no-gap .col-2-5 {
width: 40%
}
.no-gap .col-3-5 {
width: 60%
}
.no-gap .col-4-5 {
width: 80%
}
.no-gap .col-1-6 {
width: 16.6667%
}
.no-gap .col-5-6 {
width: 83.3335%
}
.column-2 > div,
.column-2 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-3 > div,
.column-3 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-4 > div,
.column-4 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.column-5 > div,
.column-5 article {
width: calc((100% - (4 * var(--gap))) / 5)
}
.column-6 > div,
.column-6 article {
width: calc((100% - (5 * var(--gap))) / 6)
}
.column-7 > div,
.column-7 article {
width: calc((100% - (6 * var(--gap))) / 7)
}
.column-8 > div,
.column-8 article {
width: calc((100% - (7 * var(--gap))) / 8)
}
.column-9 > div,
.column-9 article {
width: calc((100% - (8 * var(--gap))) / 9)
}
.no-gap.column-2 > div,
.no-gap.column-2 article {
width: calc(100% / 2)
}
.no-gap.column-3 > div,
.no-gap.column-3 article {
width: calc(100% / 3)
}
.no-gap.column-4 > div,
.no-gap.column-4 article {
width: calc(100% / 4)
}
.no-gap.column-5 > div,
.no-gap.column-5 article {
width: calc(100% / 5)
}
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 6)
}
.no-gap.column-7 > div,
.no-gap.column-7 article {
width: calc(100% / 7)
}
.no-gap.column-8 > div,
.no-gap.column-8 article {
width: calc(100% / 8)
}
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 9)
} .mansory-2,
.mansory-3,
.mansory-4,
.mansory-5,
.mansory-6 {
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px;
}
.mansory-2 > div,
.mansory-3 > div,
.mansory-4 > div,
.mansory-5 > div,
.mansory-6 > div,
.mansory-2 > article,
.mansory-3 > article,
.mansory-4 > article,
.mansory-5 > article,
.mansory-6 > article {
display: block;
width: 100%;
margin: 0px; padding: 0;
position: relative;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.mansory-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.mansory-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.mansory-5 {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
.mansory-6 {
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
@media screen and (min-width: 768px) and (max-width:1024px) {
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article,
.column-6 > div,
.column-6 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-7 > div,
.column-7 article,
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article,
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 3)
}
.no-gap.column-7 > div,
.no-gap.column-7 article,
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 4)
}
.mansory-4 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-5 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.mansory-6 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (min-width: 480px) and (max-width:767px) {
.column-3 > div,
.column-3 article,
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-6 > div,
.column-6 article,
.column-7 > div,
.column-7 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.no-gap.column-3 > div,
.no-gap.column-3 article,
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article {
width: calc(100% / 2)
}
.no-gap.column-6 > div,
.no-gap.column-6 article,
.no-gap.column-7 > div,
.no-gap.column-7 article {
width: calc(100% / 3)
}
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 4)
}
.mansory-4 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.mansory-5 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-6 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (max-width: 479px) {
.column-2 > div,
.column-2 article,
.column-3 > div,
.column-3 article {
width: 100%
}
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article,
.column-6 > div,
.column-6 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-7 > div,
.column-7 article,
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.no-gap.column-2 > div,
.no-gap.column-2 article,
.no-gap.column-3 > div,
.no-gap.column-3 article {
width: 100%
}
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article,
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 2)
}
.no-gap.column-7 > div,
.no-gap.column-7 article,
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 3)
}
.mansory-6,
.mansory-5,
.mansory-4 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media screen and (max-width: 768px) {
.row {
width: 100%;
}
.col-1-2,
.col-1-3,
.col-2-3,
.col-1-4,
.col-3-4,
.col-1-5,
.col-2-5,
.col-3-5,
.col-4-5,
.col-1-6,
.col-5-6,
.no-gap .col-1-2,
.no-gap .col-1-3,
.no-gap .col-2-3,
.no-gap .col-1-4,
.no-gap .col-3-4,
.no-gap .col-1-5,
.no-gap .col-2-5,
.no-gap .col-3-5,
.no-gap .col-4-5,
.no-gap .col-1-6,
.no-gap .col-5-6 {
width: 100%
}
.mansory-3 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.offset-left {
padding-right: 1rem;
padding-left: 1rem;
}
.offset-right {
padding-right: 1rem;
padding-left: 1rem;
}
}
@media only screen and (min-width: 600px) and (max-width: 850px) and (orientation: landscape) {
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 360px) and (max-width: 599px) {
.mansory-4-column,
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-width: 360px) {
.mansory-2-column,
.mansory-3-column,
.mansory-4-column,
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}:root {
--form-ui-color: #194074;
--form-ui-bg: #ffffff;
--form-size: 2rem;
--form-border-radius: 0.25rem;
--form-border: solid 1px rgba(0, 0, 0, 0.2);
--form-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="file"],
select {
padding: 0 0.75rem;
color: inherit;
height: var(--form-size);
font-size: smaller;
line-height: 1;
margin: 0;
font-family: inherit;
border-radius: 28px;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
background-color: #F5F5F5;
border: none;
margin-bottom: 0.75rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
min-width: 250px;
max-width: 100%;
width: 100%;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
.select {
position: relative;
display: inline-block;
width: 100%;
color: rgba(94, 94, 94, 0.69);
font-weight: 500;
}
.select:after {
border-style: solid;
border-width: 0.2rem 0.2rem 0 0;
content: "";
border-color: #292929;
display: inline-block;
height: 11px;
width: 11px;
background: transparent;
position: absolute;
top: 50%;
right: 1rem;
margin-top: -0.75rem;
transform: rotate(135deg);
pointer-events: none;
}
textarea {
background-color: #F5F5F5;
padding: 0.75rem;
display: block;
color: inherit;
font-size: inherit;
height: auto;
margin: 0;
font-family: inherit;
height: 8rem;
border-radius: 28px;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border: none;
margin-bottom: 0.75rem;
}
input[type="submit"],
input[type="button"],
button,
.button {
-webkit-appearance: none;
background: transparent;
color: #194074;
border: 1px solid #194074;
font-size: calc(var(--form-size) * 0.5);
line-height: 1;
text-transform: uppercase;
text-align: center;
vertical-align: middle;
font-weight: 600;
cursor: pointer;
display: inline-block;
position: relative;
font-family: inherit;
text-decoration: none;
padding: 0.5rem calc(var(--form-size) * 0.5);
border-radius: 2rem;
position: relative;
overflow: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
button:hover,
.button:hover {
background: #333;
color: #fff;
}
::-webkit-input-placeholder {
color: rgba(94, 94, 94, 0.69);
font-weight: 500;
}
:-moz-placeholder {
color: rgba(94, 94, 94, 0.69);
font-weight: 500;
}
::-moz-placeholder {
color: rgba(94, 94, 94, 0.69);
font-weight: 500;
}
:-ms-input-placeholder {
color: rgba(94, 94, 94, 0.69);
font-weight: 500;
}
input:focus,
select:focus,
textarea:focus {
outline: none !important;
border-color: var(--form-ui-color);
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.qty {
display: inline-block;
line-height: 1;
margin: 0;
height: var(--form-size);
font-family: inherit;
border-radius: var(--form-border-radius);
-webkit-border-radius: var(--form-border-radius);
-moz-border-radius: var(--form-border-radius);
background-color: var(--form-ui-bg);
box-shadow: var(--form-box-shadow);
border: var(--form-border);
}
.qty input[type=number] {
width: var(--form-size);
height: 100%;
padding: 0;
font-size: smaller;
text-align: center;
border-radius: 0;
box-shadow: none;
border-bottom: none;
border-top: none;
border-left: solid 1px rgba(0, 0, 0, 0.1);
border-right: solid 1px rgba(0, 0, 0, 0.1);
background: transparent;
}
.qty button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
height: 100%;
cursor: pointer;
margin: 0;
position: relative;
box-shadow: none;
color: inherit;
vertical-align: middle;
text-align: center;
font-family: 'Trebuchet MS';
font-weight: normal;
font-size: 1rem;
padding: 0 0.5rem;
}
input[type="file"] {
padding: 0;
vertical-align: middle;
position: relative;
width: 100%;
}
input[type="file"]::-webkit-file-upload-button {
visibility: hidden;
}
input[type="file"]::before {
content: 'Fájlok csatolása';
display: inline-block;
background: var(--form-ui-color);
border-radius: var(--form-size);
padding: 0 calc(var(--form-size) * 0.5);
line-height: calc(var(--form-size) - 4px);
height: calc(var(--form-size) - 4px);
outline: none;
white-space: nowrap;
color: #fff;
-webkit-user-select: none;
cursor: pointer;
}
input[type="file"]:hover::before {
background: var(--form-ui-color);
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
input[type="checkbox"]+label,
input[type="radio"]+label,
input[type="checkbox"]+span,
input[type="radio"]+span {
padding: 0;
display: inline-block;
overflow: hidden;
position: relative;
margin: 0.25rem 0.5rem 0.25rem 0;
vertical-align: middle;
}
input[type="checkbox"]+label:before,
input[type="radio"]+label:before,
input[type="checkbox"]+span:before,
input[type="radio"]+span:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
content: "";
display: inline-block;
width: 22px;
height: 23px;
vertical-align: middle;
cursor: pointer;
border-radius: 6px;
background: var(--form-ui-bg);
color: #fff;
line-height: 1;
margin-right: 0.5rem;
box-shadow: var(--form-box-shadow);
border: var(--form-border);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
input[type="radio"]+label:before,
input[type="radio"]+span:before {
border-radius: 50%;
}
input[type="checkbox"]:checked+label:before,
input[type="checkbox"]:checked+span:before {
content: "";
background: #194074;
color: #fff;
box-shadow: var(--form-box-shadow);
border: var(--form-border);
}
input[type="radio"]:checked+label:before,
input[type="radio"]:checked+span:before {
content: "";
color: #fff;
box-shadow: var(--form-box-shadow);
border: solid calc(var(--form-size) * 0.2) var(--form-ui-color);
border-radius: 50%;
background: #fff;
}
input[type="checkbox"]:checked+label:after,
input[type="checkbox"]:checked+span:after {
display: inline-block;
text-align: center;
width: calc(var(--form-size) * 0.75);
height: calc(var(--form-size) * 0.75);
line-height: calc(var(--form-size) * 0.75);
font-weight: bold;
font-size: calc(var(--form-size) * 0.5);
font-family: sans-serif;
color: #fff;
vertical-align: middle;
cursor: pointer;
content: 'L';
position: absolute;
top: 2px;
left: -3px;
transform: rotate(45deg) scale(-1, 1);
}
.range {
position: relative;
display: flex;
align-items: center;
}
.range-value {
padding: 0;
background: var(--form-ui-color);
border-radius: 2px;
margin-left: calc(var(--form-size) * 0.5);
font-size: smaller;
color: #fff;
width: 2.25rem;
text-align: center;
height: var(--form-size);
line-height: var(--form-size);
}
input[type="range"] {
-webkit-appearance: none;
min-width: 250px;
max-width: 100%;
height: 0.75rem;
border-radius: 0.25rem;
background: var(--form-ui-bg);
box-shadow: var(--form-box-shadow);
border: var(--form-border);
outline: none;
padding: 0;
margin: calc(var(--form-size) * 0.5) 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: calc(var(--form-size) * 0.75);
height: calc(var(--form-size) * 0.75);
border-radius: 50%;
background: var(--form-ui-color);
border: none;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
input[type="range"]::-moz-range-thumb {
width: calc(var(--form-size) * 0.75);
height: calc(var(--form-size) * 0.75);
border: 0;
border-radius: 50%;
border: none;
background: var(--form-ui-color);
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]:active::-webkit-slider-thumb {
background: var(--form-ui-color);
}
input[type="range"]::-moz-range-thumb:hover,
input[type="range"]:active::-moz-range-thumb {
background: var(--form-ui-color);
} .wp-block-button__link {
color: #194074;
background-color: transparent;
padding: 10px 2rem;
border: 2px solid #194074;
text-transform: uppercase;
font-size: 17px;
font-weight: 600;
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.wp-block-button__link:hover {
transform: scale(1.05);
}
body .button.modal, body .wpcf7-form-control {
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
body .button.modal:hover, body .wpcf7-form-control:hover {
transform: scale(1.05);
} .wpcf7-list-item {
margin: 0 1em 0 0 !important;
}
.turcsan-form input[type="text"],
.turcsan-form input[type="email"],
.turcsan-form input[type="tel"],
.turcsan-form input[type="password"] .turcsan-form input[type="file"],
.turcsan-form select {
background: #fff;
}
.turcsan-form hr {
background: var(--blue);
}
.turcsan-form input[type="submit"] {
width: 100%;
}#head .content-box {
display: flex;
justify-content: space-between;
align-items: center;
}
#main-menu {
position: relative;
}
#main-menu ul {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
#main-menu ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#main-menu ul li a {
font-size: 14px;
color: var(--blue);
font-weight: 600;
line-height: 2.2rem;
margin: 0 1.5vw;
display: inline-block;
text-transform: uppercase;
position: relative;
}
#main-menu ul li:last-of-type a {
margin-right: 0;
}
#main-menu ul li ul li a {
text-transform: none;
font-weight: 500;
font-size: smaller;
text-transform: uppercase;
}
#main-menu ul li a:hover,
.current-menu-item a {
color: var(--main-color) !important;
}
#main-menu ul li ul li a {
white-space: nowrap;
}
.opener {
right: 0px;
position: absolute;
top: 0px;
width: 1rem;
height: 2rem;
cursor: pointer;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.opener svg {
width: 0.5rem;
height: auto;
}
.opener svg path {
fill: var(--blue);
}
@media only screen and (min-width: 1025px) {
#main-menu ul li ul {
z-index: 10;
display: block;
overflow: hidden;
position: absolute;
left: -0.5vw;
background: #fff;
top: 1.8em;
padding: 0.5vw 0.5vw;
opacity: 0;
visibility: hidden;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#main-menu ul>li:hover ul {
opacity: 1;
visibility: visible;
display: block;
top: 2.2rem;
}
#main-menu div>ul>li>a:before {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--main-color);
display: block;
bottom: 0;
left: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#main-menu div>ul>li>a:hover:before {
width: 100%;
height: 2px;
}
#main-menu ul li ul li {
width: 100%;
}
}
@media only screen and (max-width: 1024px) {
#head .content-box {
display: block;
}
#top-head {
display: flex;
justify-content: space-between;
align-items: center;
}
#logo {
text-align: left;
}
#logo a {
margin: 0.5rem 0;
}
#hamburger {
height: 2rem;
width: 2rem;
padding: 0.5rem;
background: #194074;
border-radius: 50%;
display: flex;
flex-flow: column;
justify-content: space-between;
margin: 0;
cursor: pointer;
position: relative;
}
#hamburger span {
position: relative;
display: block;
height: 2px;
background: #fff;
opacity: 1;
border-radius: 3px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#hamburger span:nth-child(1) {
top: 0;
}
#hamburger span:nth-child(3) {
bottom: 0;
}
#hamburger.open span:nth-child(1) {
top: 50%;
margin-top: -1px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#hamburger.open span:nth-child(3) {
bottom: 50%;
margin-bottom: -1px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#hamburger.open span:nth-child(2) {
opacity: 0;
}
#main-menu ul {
overflow: hidden;
display: block;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#main-menu ul.open,
#main-menu ul.sub-menu.open {
opacity: 1;
max-height: 1000px;
}
#main-menu ul.sub-menu,
#main-menu ul {
max-height: 0;
opacity: 0;
}
#main-menu ul li {
text-align: left;
display: block;
}
#main-menu ul li:last-of-type a {
border: none;
}
#main-menu ul li a {
padding: 0;
margin: 0;
display: block;
border-bottom: solid 1px #ddd;
}
#main-menu ul li ul li a {
padding: 0 15px;
border: none;
}
.opener {
right: 0px;
position: absolute;
top: 0px;
width: 2rem;
height: 2rem;
cursor: pointer;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.opener svg {
width: 50%;
height: auto;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.open.opener svg {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
#head .content-box{
position: relative;
}
#lang{
position: absolute;
top: 10px;
right: 4rem;
}
#menu-language-switcher li .opener, #menu-language-switcher-en li .opener {
display: none;
}
#logo svg{
transform: scale(0.8);
margin-left: -30px;
}
} #menu-language-switcher .sub-menu,
#menu-language-switcher-en .sub-menu {
display: none; position: absolute;
top: 20px;
left: 0;
background: transparent;
list-style: none;
padding: 5px 0;
margin: 0;
min-width: 120px;
border: none;
box-shadow: none;
z-index: 1000;
}
#menu-language-switcher .menu-item-has-children,
#menu-language-switcher-en .menu-item-has-children {
position: relative;
}
#menu-language-switcher .menu-item-has-children:hover>.sub-menu,
#menu-language-switcher-en .menu-item-has-children:hover>.sub-menu {
display: block; }
#menu-language-switcher li,
#menu-language-switcher-en li {
font-size: 16px;
list-style: none;
color: #194074;
font-weight: 700;
margin-bottom: 23px;
}
#menu-language-switcher li .opener,
#menu-language-switcher-en li .opener {
right: -19px;
top: -8px;
}
#menu-language-switcher li .opener svg path,
#menu-language-switcher-en li .opener svg path {
fill: #194074!important;
}