:root {
--form-ui-color: #EF694E;
--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: 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);
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%;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
.select {
position: relative;
display: inline-block;
}
.select:after {
border-style: solid;
border-width: 0.2rem 0.2rem 0 0;
content: "";
border-color: var(--form-ui-color);
display: inline-block;
height: calc(var(--form-size) * 0.2);
width: calc(var(--form-size) * 0.2);
background: transparent;
position: absolute;
top: 50%;
right: 0.75rem;
margin-top: -0.75rem;
transform: rotate(135deg);
pointer-events: none;
}
textarea {
background: rgba(255, 255, 255, 0.8);
padding: 0.75rem;
display: block;
color: inherit;
font-size: inherit;
height: auto;
margin: 0;
font-family: inherit;
height: 8rem;
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);
margin-bottom: 0.75rem;
}
input[type="submit"],
input[type="button"],
button,
.button,.tabs li, .wp-block-button__link  {
-webkit-appearance: none;
background: var(--form-ui-color);
color: #fff;
border: none;
font-size: calc(var(--form-size) * 0.5);
line-height: 1;
text-transform: uppercase;
text-align: center;
vertical-align: middle;
cursor: pointer;
display: inline-block;
position: relative;
font-family: inherit;
text-decoration: none;
padding: 1rem 5rem;
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;
margin-top:2rem
}
.wp-block-button__link{
display: inline-block;
padding:1rem 2rem
}
.button.secondary{
border:2px solid var(--form-ui-color);
background: transparent;
color:inherit !important;
padding: 1rem 4rem 1rem 2rem;
margin-left:4rem;
position: inline-block;
position: relative
}
.button.secondary:after {
content: "";
width: 0;
height: 0;
border-top: 0.45rem solid transparent;
border-bottom: 0.45rem solid transparent;
border-left: 0.9rem solid var(--form-ui-color);
position: absolute;
right: 1.5rem;
top: 1rem;
}
.page-id-447 .button.secondary:after,
.page-id-354 .button.secondary:after
{
border-left: 0.9rem solid #EC008C !important;
}
.button.other{
border:2px solid #2D2D2D;
background: transparent;
color:#2D2D2D;
padding: 1rem 3rem 1rem 3rem !important
}
button:hover,
.button:hover {
background: #2D2D2D !important;
color: #fff;
}
.button.secondary:hover, .button.other:hover{
color: #fff !important;
border:2px solid #2D2D2D !important;
}
.button.secondary:hover:after {
border-left: 0.9rem solid white;
}
::-webkit-input-placeholder {
color: #888;
font-style: italic;
}
:-moz-placeholder {
color: #888;
font-style: italic;
}
::-moz-placeholder {
color: #888;
font-style: italic;
}
:-ms-input-placeholder {
color: #888;
font-style: italic;
}
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;
}
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: calc(var(--form-size) * 0.75);
height: calc(var(--form-size) * 0.75);
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
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: var(--form-ui-color);
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: 0;
left: 0;
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);
} .wpcf7-list-item {
margin: 0 1em 0 0 !important;
}