body, html {
margin: 0 auto;
min-height: 100vh;
/* min-width: 320px; */
width: 100%;
height: 100%;
}
body {
font-family: -apple-system, BlankMaxSystemFont, Arial, sans-serig;
box-sizing: border-box;
overflow-y: scroll;
/* overscroll-behavior-y: contain; */
padding: 0px;
margin: 0px;
background: #faf7f1;
background: #ffffff;
}
/* iphone-detectors
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
} */
table {
border-collapse: collapse;
border-spacing: 0;
}
table td.r { text-align: right; }
table td.c { text-align: center; }
html {
font-size: 16px;
line-height: 1.4;
}
p { }
a { color: #0099cc; }
cursor { cursor: pointer; }
nw { white-space: nowrap; }
.r { text-align: right; }
.c { text-align: center; }
.italic { font-style: italic; }
.cursor { cursor: pointer; }
.nw { white-space: nowrap; }
.none, none, .hide, hide { display: none !important; }
.pointer { cursor: pointer; }
/** */
#ajax {
position: absolute;
top: 10px; right: 10px;
max-width: 24px;
max-height: 24px;
display: none;
}
err {
display: block;
padding: 5px;
background: #eadab6;
border-radius: 5px;
font-family: monospace;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#alerter {
display: block;
display: none;
z-index: 1011;
position: fixed;
top: 30px; left: 30px;
min-width: 320px;
min-height: 320px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
background: #f9f4ec;
left: 50%;
transform: translate(-50%, 0);
}
#alerter close {
position: absolute;
top: 20px; right: 20px;
border-bottom: 1px dotted #0099cc;
border-bottom: 1px dotted #684137;
color: #0099cc;
color: #684137;
cursor: pointer;
font-size: small;
}
#alerterBack {
display: block;
display: none;
z-index: 1010;
position: fixed;
width: 100%;
height: 100%;
background: rgba(36, 33, 30, 0.31);
cursor: pointer;
}
#alerterTxt {
padding: 40px 100px 20px 20px;
}
/** */
#confirmer {
display: block;
display: none;
z-index: 1011;
position: fixed;
top: 30px; left: 30px;
min-width: 320px;
min-height: 240px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
background: #f9f4ec;
left: 50%;
transform: translate(-50%, 0);
}
#confirmer close {
position: absolute;
top: 20px; right: 20px;
border-bottom: 1px dotted #0099cc;
border-bottom: 1px dotted #684137;
color: #0099cc;
color: #684137;
cursor: pointer;
font-size: small;
}
#confirmerBack {
display: block;
display: none;
z-index: 1010;
position: fixed;
width: 100%;
height: 100%;
background: rgba(36, 33, 30, 0.31);
cursor: pointer;
}
#confirmerTxt {
padding: 40px 100px 20px 20px;
}
#confirmer flexbox {
padding: 0px 0px 0px 20px;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
/** */
flexbox {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 5px;
}
flexScriptBox {
display: grid;
grid-template-columns: 500px auto;
gap: 20px;
}
flexScriptBox.wide { grid-template-columns: 720px auto; }
flexScriptBox .scriptBox {
padding: 20px 60px 20px 40px;
background: #eee;
}
flexScriptBox .scriptBox.unify {
padding: 20px 0px 20px 40px;
background: #eee;
}
flexScriptBox .scriptBox textarea.main-script {
height: 640px;
}
flexScriptBox .blackSticky {
position: sticky;
top: 15px;
}
flexScriptBox .blackSticky.unify {
height: 100vh;
overflow: scroll;
padding: 0px 60px 0px 0px;
}
flexScriptBox .tableScrollBox {
padding: 20px;
vertical-align: top;
}
inputBox {
display: block;
padding: 0px 0px 12px 0px;
}
outButton {
display: block;
padding: 10px;
border-radius: 10px;
background: #0099cc;
color: #fff;
cursor: pointer;
width: fit-content;
}
outButton.alt {
background: #918579;
}
outButton.to {
background: #ac6f7a;
}
outButtonSmall {
padding: 2px 5px;
border-radius: 5px;
background: #0099cc;
color: #fff;
cursor: pointer;
font-size: smaller;
}
outButtonSmall.red { background: #c86b6b; }
outButtonSmall.gray { background: #8e8989; }
outButtonSmall.white { background: #fff; background: linear-gradient(#fff, #ccc); border: 1px solid #ddd; color: #333; border-radius: 8px; }
outRadio.act { background: #0099cc !important; }
outRadio {
padding: 2px 5px;
border-radius: 5px;
background: #ccc;
color: #fff;
cursor: pointer;
font-size: smaller;
}
outLab {
display: block;
}
textarea.nice, textarea.n {
color: #009688;
color: #11aa37;
font-weight: bold;
font-size: 100%;
height: 28px !important;
}
textarea.nice2, textarea.n2 {
color: #009688;
font-weight: bold;
font-size: 100%;
height: 28px !important;
}
textarea.nice0, textarea.n0 {
color: #333;
font-weight: bold;
font-size: 100%;
height: 28px !important;
}
textarea.txtScript60 { height: 60px !important; }
textarea.txtScript120 { height: 120px !important; }
textarea.txtScript240 { height: 240px !important; }
textarea.txtScript320 { height: 320px !important; }
textarea.txtScript480 { height: 480px !important; }
textarea.txtScript
, textarea.txtScript60
, textarea.txtScript120
, textarea.txtScript240
, textarea.txtScript320
, textarea.txtScript480
{
width: 100%;
height: 320px;
padding: 10px;
background: #fff;
border-radius: 10px;
font-family: monospace !important;
}
textarea.txtInput2 { height: 48px !important; }
textarea.txtInput
, textarea.txtInput2
{
width: 100%;
height: 32px;
background: #fff;
border-radius: 10px;
resize: none;
font-family: monospace !important;
padding: 5px 5px 0px 8px;
}
textarea.txtInput30 { width: 30px !important; }
textarea.txtInput40 { width: 40px !important; }
textarea.txtInput60 { width: 60px !important; }
textarea.txtInput80 { width: 80px !important; }
textarea.txtInput100 { width: 100px !important; }
textarea.txtInput120
, textarea.txtInput30
, textarea.txtInput40
, textarea.txtInput60
, textarea.txtInput80
, textarea.txtInput100
{
width: 120px;
height: 32px;
background: #fff;
border-radius: 10px;
resize: none;
padding: 3px 0px 0px 3px;
font-size: 100%;
color: #009688;
font-weight: bold;
font-family: monospace !important;
}
textarea.txtInputChpu {
width: 100%;
height: 48px;
background: #fff;
border-radius: 10px;
resize: none;
padding: 3px 0px 0px 3px;
font-size: 100%;
color: #009688;
font-weight: bold;
font-family: monospace !important;
}
.vent-input-theme textarea.txtInput
, .vent-input-theme textarea.txtScript60
, .vent-input-theme textarea.txtScript80
, .vent-input-theme textarea.txtScript120
, .vent-input-theme textarea.txtScript240
, .vent-input-theme textarea.txtScript320
, .vent-input-theme textarea.txtScript480
, .vent-input-theme textarea.txtInput
, .vent-input-theme textarea.txtInput2
, .vent-input-theme input.txtInput
, .vent-input-theme input.txtInput2
{
border-radius: 5px;
border: 1px solid #e1e1e1;
box-shadow: inset 1px 1px 2px #aaa;
outline: none;
}
.vent-input-theme .formLabel {
font-size: 13px;
font-weight: 100;
color: #333;
}
.vent-input-theme .close-icon {
position: absolute;
top: 0px;
right: 5px;
color: #ccc;
cursor: pointer;
}
.vent-input-theme .close-icon:hover {
color: #333;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.zoom-protector {
position: relative;
overflow: hidden;
}
.outCenterBox {
width: 1175px;
max-width: 1175px;
min-width: 1175px;
margin: 0px auto;
/* border: 1px solid #f00; */
}
@media (min-width: 480px) and (max-width: 1305px) {
.outCenterBox {
width: 98%;
max-width: unset;
min-width: unset;
margin: 0px auto;
}
}
@media (max-width: 479px) {
.outCenterBox {
width: auto;
max-width: unset;
min-width: unset;
margin: 0px;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#to-back-url {
position: fixed;
bottom: 20px;
left: 20px;
}
#to-back-url .bullet {
font-size: 1px;
line-height: 1px;
padding: 4px;
border-radius: 4px;
background: #ccccccaa;
}
#scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 55px;
padding: 0px 0px 5px 0px;
background: #16789CA3;
border-radius: 5px;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#scroll-to-top b {
font-size: 150%;
color: #fff;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.glo-button-box {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .bottom-box {
margin-top: 15px;
}
}
@media (max-width: 479px) {
.out-block-preim-box .bottom-box {
margin-top: 25px;
}
}
.glo-button-box a { text-decoration: none; }
.glo-button-box border {
display: flex;
border: 1px solid rgb(12, 163, 151);
border: 1px solid #15a1B2;
justify-content: center;
align-items: center;
min-height: 48px;
min-height: 36px;
padding: 6px 39px 6px 39px;
padding: 3px 24px 3px 24px;
cursor: pointer;
}
@media (min-width: 480px) and (max-width: 1304px) {
.glo-button-box border {
min-height: 36px;
padding: 3px 24px 3px 24px;
}
}
@media (max-width: 479px) {
.glo-button-box border {
min-height: 36px;
padding: 3px 24px 3px 24px;
}
}
.glo-button-box border:hover {
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
box-shadow: 3px 9px 20px 0px rgba(0, 0, 0, 0.35);
}
.glo-button-box border b {
display: block;
white-space: nowrap;
white-space: wrap;
font-size: 20px;
font-size: 16px;
line-height: 24px;
line-height: 19px;
font-weight: 600;
text-decoration: none;
color: #000;
text-align: center;
}
@media (min-width: 480px) and (max-width: 1304px) {
.glo-button-box border b {
font-size: 16px;
line-height: 19px;
}
}
@media (max-width: 479px) {
.glo-button-box border b {
font-size: 14px;
line-height: 20px;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.wiki-format-box {
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box .wiki-format-box {
}
}
@media (max-width: 479px) {
.out-block-about-box .wiki-format-box {
}
}
@media (max-width: 360px) {
.out-block-about-box .wiki-format-box {
}
}
.wiki-p, p.wi-page, p.wiki-page, p.wiki-h0, h0 {
font-size: 100%;
line-height: 133%;
margin-bottom: 1.1rem;
}
@media (min-width: 480px) and (max-width: 1304px) {
p.wi-page, p.wiki-h0, h0 {
}
}
@media (max-width: 479px) {
p.wi-page, p.wiki-h0, h0 {
font-size: 100%;
line-height: 125%;
margin: 0px 25px 15px 15px;
}
}
@media (max-width: 360px) {
p.wi-page, p.wiki-h0, h0 {
}
}
h1.wiki-h
, h2.wiki-h {
color: #054B81 !important;
}
h1 {
font-size: 150%;
line-height: 100%;
}
@media (min-width: 480px) and (max-width: 1304px) {
h1 {
}
}
@media (max-width: 479px) {
h1 {
font-size: 140%;
line-height: 125%;
margin: 0px 15px;
}
}
@media (max-width: 360px) {
h1 {
}
}
h2 {
font-size: 125%;
line-height: 100%;
}
@media (min-width: 480px) and (max-width: 1304px) {
h2 {
}
}
@media (max-width: 479px) {
h2 {
font-size: 110%;
line-height: 125%;
margin: 0px 15px;
}
}
@media (max-width: 360px) {
h2 {
}
}
h3 {
font-size: 110%;
line-height: 100%;
}
@media (min-width: 480px) and (max-width: 1304px) {
h3 {
}
}
@media (max-width: 479px) {
h3 {
font-size: 105%;
line-height: 125%;
margin: 0px 15px;
}
}
@media (max-width: 360px) {
h3 {
}
}
.wiki-h4 {
font-size: 150%;
line-height: 100%;
}
@media (min-width: 480px) and (max-width: 1304px) {
.wiki-h4 {
}
}
@media (max-width: 479px) {
.wiki-h4 {
font-size: 140%;
line-height: 125%;
margin: 0px 15px;
}
}
@media (max-width: 360px) {
.wiki-h4 {
}
}
.wiki-h5 {
font-size: 80%;
line-height: 125%;
}
@media (min-width: 480px) and (max-width: 1304px) {
.wiki-h4 {
}
}
@media (max-width: 479px) {
.wiki-h4 {
font-size: 90%;
line-height: 110%;
margin: 0px 15px;
}
}
@media (max-width: 360px) {
.wiki-h4 {
}
}
.wiki-h6 {
color: #0CA397;
font-size: 30px;
line-height: 36px;
font-weight: 500;
margin: 20px 20px 20px 20px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.wiki-h6 {
font-size: 2.5vmax;
line-height: 27px;
margin: 10px 10px 10px 10px;
}
}
@media (max-width: 479px) {
.wiki-h6 {
}
}
@media (max-width: 360px) {
.wiki-h6 {
font-size: 22px;
}
}
/** */
.wiki-ol { counter-reset: item }
.wiki-ol li {
display: block;
padding: 10px 25px 10px 15px;
}
.wiki-ol li::before {
content: counter(item) ". ";
counter-increment: item;
position: absolute;
margin-left: -40px;
color: #fff;
background: #309d8f;
padding: 5px;
border-radius: 10px;
font-size: 90%;
line-height: 100%;
}
@media (max-width: 599px) {
.wiki-ol li::before {
margin-left: -35px;
}
}
.wiki-ul-1, .wiki-ul-2, .wiki-ul-3, .wiki-ul-4 { counter-reset: item }
.wiki-ul-1 li, .wiki-ul-2 li, .wiki-ul-3 li, .wiki-ul-4 li { display: block; padding: 10px 0px 10px 10px; }
.wiki-ul-1 li::before, .wiki-ul-2 li::before, .wiki-ul-3 li::before, .wiki-ul-4 li::before {
content: "—";
position: absolute;
margin-left: -40px;
color: #000;
background: transparent;
padding: 5px;
border-radius: 10px;
line-height: 100%;
}
.wiki-ul-2 li::before {
content: "●";
font-size: 110%;
padding-top: 3px;
}
.wiki-ul-3 li::before {
content: "●";
font-size: 110%;
padding: 3px 6px;
border-radius: 15px;
margin-top: 0px;
color: #fff;
background: #309d8f;
}
/** */
.wiki-table-1 td {
padding: 5px 10px 5px 8px;
font-size: 80%;
font-family: monospace;
}
@media (min-width: 600px) and (max-width: 1024px) {
.wiki-table-1 td {
font-size: 80%;
line-height: 120%;
padding: 4px 3px 5px 3px;
}
}
@media (max-width: 599px) {
.wiki-table-1 td {
font-size: 75%;
line-height: 120%;
padding: 3px 1px 3px 1px;
}
}
.wiki-table-1 tr:nth-child(even) td {
background: #f2f2f2;
}
.wiki-table-1 tr:first-child td {
background: #2e789c;
color: #fff;
}
/** */
/* .wiki-table-2, .wiki-table-2 tbody, .wiki-table-2 td { display: block; } */
.wiki-table-2 .mob { display: none; }
.wiki-table-2 tr {
/* display: flex; */
}
.wiki-table-2 tr td {
padding: 8px 12px;
border: 3px solid #fff;
font-size: 80%;
word-break: break-all;
}
.wiki-table-2 tr td:nth-child(1) {
width:30%;
border-bottom: 1px solid #82CD5A;
color: #054B81;
font-weight: 600;
}
.wiki-table-2 tr td:nth-child(2) {
width:35%;
background: #F1F5F9;
}
.wiki-table-2 tr td:nth-child(3) {
width:35%;
background: #FEF5F0;
}
@media (min-width: 600px) and (max-width: 1024px) {
.wiki-table-2 td {
font-size: 80%;
line-height: 120%;
padding: 4px 3px 5px 3px;
}
}
@media (max-width: 599px) {
.wiki-table-2 .desk td:nth-child(1) { display: none; }
.wiki-table-2 .mob { display: table-row; }
.wiki-table-2 .mob td { text-align: center; }
.wiki-table-1 td {
font-size: 75%;
line-height: 120%;
padding: 3px 1px 3px 1px;
}
}
/** */
.wiki-table-3 { width: 100%; }
.wiki-table-3 .mob { display: none; }
.wiki-table-3 tr {
}
.wiki-table-3 tr:hover td { background: #ECECEC !important; }
.wiki-table-3 tr:hover td { background: #97DDDD !important; }
.wiki-table-3 tr:nth-child(1):hover td { background: #F2F2F2 !important; }
.wiki-table-3 tr:nth-child(1):hover td { background: #C6EAEA !important; }
.wiki-table-3 tr td {
padding: 8px 12px;
border: 1px solid #DEE2E6;
border: 1px solid #A8D4D6;
font-size: 80%;
font-size: 110%;
word-break: break-all;
background: #F7F8F9;
background: #D8EFEF;
color: #172433;
font-family: Arial, sans-serif;
}
@media (min-width: 600px) and (max-width: 1024px) {
.wiki-table-3 td {
font-size: 80%;
font-size: 70%;
line-height: 120%;
padding: 4px 3px 5px 3px;
}
}
@media (max-width: 599px) {
.wiki-table-3 .mob { display: table-row; }
.wiki-table-3 .mob td { text-align: center; }
.wiki-table-3 tr td {
font-size: 75%;
font-size: 65%;
line-height: 120%;
padding: 3px 1px 3px 1px;
}
}
.wiki-table-3 tr:nth-child(1) td {
border-bottom: 3px solid #172433;
border-bottom: 3px solid #60ADB1;
font-weight: bold;
}
.wiki-table-3 tr:nth-child(even) td {
background: #F2F2F2;
background: #D8EFEF;
background: #C6EAEA;
}
.wiki-table-3 tr:first-child td {
background: #F2F2F2;
background: #D8EFEF;
background: #C6EAEA;
white-space: nowrap;
}
@media (min-width: 1024px) {
.wiki-table-3 tr:first-child td {
font-size: 100%;
}
}
/** */
.wiki-table-4 { width: 100%; }
.wiki-table-4 .mob { }
.wiki-table-4 tr td {
padding: 8px 12px;
font-size: 15px;
word-break: break-all;
font-family: Arial, sans-serif;
}
.wiki-table-4 tr td:first-child {
color: #848484;
}
@media (min-width: 600px) and (max-width: 1024px) {
.wiki-table-4 td {
font-size: 13px;
line-height: 120%;
padding: 4px 3px 5px 3px;
}
}
@media (max-width: 599px) {
.wiki-table-4 .mob { display: table-row; }
.wiki-table-4 .mob td { text-align: center; }
.wiki-table-4 tr td {
font-size: 13px;
line-height: 120%;
padding: 3px 1px 3px 1px;
}
}
.wiki-table-4 tr:nth-child(odd) td {
background: #eee;
}
/** */
.wiki-box-2-column {
display: flex;
flex-direction: row;
}
.wiki-box-2-column .c1
, .wiki-box-2-column .c2 {
flex: 1 1 50%;
}
@media (max-width: 599px) {
.wiki-box-2-column {
flex-direction: column;
}
.wiki-box-2-column .c1
, .wiki-box-2-column .c2 {
flex: 1 1 100%;
}
}
/** */
.wiki-box-3-column {
display: flex;
flex-direction: row;
}
.wiki-box-3-column .c1
, .wiki-box-3-column .c2
, .wiki-box-3-column .c3 {
flex: 1 1 33%;
}
@media (max-width: 599px) {
.wiki-box-3-column {
flex-direction: column;
}
.wiki-box-3-column .c1
, .wiki-box-3-column .c2
, .wiki-box-3-column .c3 {
flex: 1 1 100%;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-block-sfera-box {
display: flex;
flex-direction: column;
}
.out-block-sfera-box .header-box, .out-block-sfera-box .header-box a {
color: #0CA397;
font-size: 30px;
line-height: 36px;
font-weight: 500;
text-align: center;
margin: 20px 20px 20px 20px;
text-decoration: none;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .header-box, .out-block-sfera-box .header-box a {
font-weight: 500;
font-size: 22px;
font-size: 2.5vmax;
line-height: 27px;
margin: 10px 10px 10px 10px;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .header-box, .out-block-sfera-box .header-box a {
font-weight: 500;
font-size: 22px;
line-height: 27px;
margin: 10px 10px 10px 10px;
}
}
.out-block-sfera-box .bottom-box {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .bottom-box {
margin-top: 36px;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .bottom-box {
margin-top: 25px;
}
}
.out-block-sfera-box .bottom-box a { text-decoration: none; }
.out-block-sfera-box .bottom-box border {
display: flex;
border: 1px solid rgb(12, 163, 151);
border: 1px solid #15a1B2;
justify-content: center;
align-items: center;
min-height: 48px;
padding: 6px 39px 6px 39px;
cursor: pointer;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .bottom-box border {
min-height: 36px;
padding: 3px 24px 3px 24px;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .bottom-box border {
min-height: 36px;
padding: 3px 24px 3px 24px;
}
}
.out-block-sfera-box .bottom-box border:hover {
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
box-shadow: 3px 9px 20px 0px rgba(0, 0, 0, 0.35);
}
.out-block-sfera-box .bottom-box border b {
display: block;
white-space: nowrap;
white-space: wrap;
font-size: 20px;
line-height: 24px;
font-weight: 600;
text-decoration: none;
color: #000;
text-align: center;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .bottom-box border b {
font-size: 16px;
line-height: 19px;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .bottom-box border b {
font-size: 14px;
line-height: 20px;
}
}
.out-block-sfera-box .ekran-frame {
position: relative;
display: block;
height: 380px;
width: 100%;
overflow: hidden;
}
.out-block-sfera-box .ekran {
position: relative;
display: block;
height: 380px;
width: 100%;
overflow: hidden;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .ekran {
}
}
@media (max-width: 479px) {
.out-block-sfera-box .ekran-frame {
position: unset;
height: unset;
}
.out-block-sfera-box .ekran {
position: unset;
height: unset;
}
}
.out-block-sfera-box .list-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 36px;
justify-content: center;
flex: 1 1 0;
}
.out-block-sfera-box .ekran .list-box {
flex-wrap: nowrap;
position: absolute;
top: 0px;
left: 0px;
gap: 44px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .list-box {
gap: 16px;
align-content: center;
}
.out-block-sfera-box .ekran .list-box {
gap: 16px;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .list-box {
flex-direction: column;
gap: 10px;
position: unset;
}
.out-block-sfera-box .ekran .list-box {
gap: 10px;
position: unset;
}
}
.out-block-sfera-box .ekran-frame .arrow-left
, .out-block-sfera-box .ekran-frame .arrow-right {
position: absolute;
top: 150px;
background: #fff;
border-radius: 15px;
width: 20px;
height: 20px;
font-size: 24px;
box-shadow: 5px 5px 5px #000;
opacity: 0.5;
cursor: pointer;
padding: 10px 15px 25px 10px;
}
.out-block-sfera-box .ekran-frame .arrow-left {
left: 6px;
}
.out-block-sfera-box .ekran-frame .arrow-right {
right: 6px;
}
@media (min-width: 480px) and (max-width: 1304px) {
}
@media (max-width: 479px) {
.out-block-sfera-box .ekran-frame .arrow-left {
display: none;
}
.out-block-sfera-box .ekran-frame .arrow-right {
display: none;
}
}
.out-block-sfera-box .out-block-sfera-item * { text-decoration: none; }
.out-block-sfera-box .out-block-sfera-item {
width: 260px;
min-width: 260px;
max-width: 260px;
/* height: 361px; */
min-height: 361px;
background: #054B81;
display: flex;
flex-direction: column;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .out-block-sfera-item {
width: 21%;
min-width: 172px;
max-width: unset;
/* height: 210px; */
min-height: unset;
}
.out-block-sfera-box .ekran .out-block-sfera-item {
height: 100%;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .out-block-sfera-item {
width: auto;
width: 90%;
min-width: unset;
max-width: unset;
height: auto;
min-height: 80px;
margin: 0px 20px 0px 20px;
flex-direction: row;
align-items: stretch;
}
}
.out-block-sfera-box .out-block-sfera-item .img-item {
width: 260px;
min-width: 260px;
max-width: 260px;
height: 250px;
min-height: 250px;
max-height: 250px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .out-block-sfera-item .img-item {
width: 100%;
min-width: unset;
max-width: unset;
/* height: 150px; */
min-height: unset;
max-height: unset;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .out-block-sfera-item .img-item {
width: 90px;
min-width: 90px;
max-width: 90px;
min-height: 80px;
height: auto;
}
}
.out-block-sfera-box .out-block-sfera-item img {
width: 260px;
min-width: 260px;
max-width: 260px;
min-height: 250px;
object-fit: cover;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .out-block-sfera-item img {
width: 100%;
aspect-ratio: 1 / 1;
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .out-block-sfera-item img {
width: 90px;
width: 20%;
width: 180px;
min-width: 90px;
max-width: 180px;
min-height: 80px;
aspect-ratio: 1 / 1;
}
}
.out-block-sfera-box .out-block-sfera-item .text-item {
min-height: 111px;
height: 100%;
color: #ffffff;
background: #054B81;
padding: 12px 12px 12px 12px;
padding: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
}
.out-block-sfera-box .out-block-sfera-item .text-item b {
font-size: 25px;
font-weight: 500;
line-height: 30px;
text-align: center;
padding: 10px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-sfera-box .out-block-sfera-item .text-item {
min-height: 70px;
}
.out-block-sfera-box .out-block-sfera-item .text-item b {
font-size: 16px;
font-size: 133%;
font-size: 18px;
font-size: 1.6vmax;
font-weight: 500;
line-height: 19px;
line-height: 133%;
text-align: center;
}
}
@media (max-width: 479px) {
.out-block-sfera-box .out-block-sfera-item .text-item {
/* min-height: 80px; */
width: 100%;
height: 100%;
padding: 12px 12px 0px 12px;
padding: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.out-block-sfera-box .out-block-sfera-item .text-item b {
width: 100%;
font-size: 24px;
font-size: 2.1vmax;
font-weight: 500;
line-height: 32px;
line-height: 133%;
text-align: center;
text-align: left;
padding: 12px 20px;
}
}
@media (max-width: 360px) {
.out-block-sfera-box .out-block-sfera-item .text-item {
}
.out-block-sfera-box .out-block-sfera-item .text-item b {
font-size: 1.8vmax;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-block-preim-box {
display: flex;
flex-direction: column;
}
.out-block-preim-box .header-box {
color: #0CA397;
font-weight: 500;
font-size: 30px;
line-height: 32px;
text-align: center;
margin: 20px 20px 20px 20px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .header-box {
font-weight: 500;
font-size: 22px;
font-size: 2.5vmax;
line-height: 120%;
margin: 10px 10px 30px 10px;
}
}
@media (max-width: 479px) {
.out-block-preim-box .header-box {
font-weight: 500;
font-size: 22px;
line-height: 27px;
margin: 10px 10px 10px 10px;
}
}
.out-block-preim-box .bottom-box {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .bottom-box {
margin-top: 15px;
}
}
@media (max-width: 479px) {
.out-block-preim-box .bottom-box {
margin-top: 25px;
}
}
.out-block-preim-box .bottom-box a { text-decoration: none; }
.out-block-preim-box .bottom-box border {
display: flex;
border: 1px solid rgb(12, 163, 151);
border: 1px solid #15a1B2;
justify-content: center;
align-items: center;
min-height: 48px;
min-height: 36px;
padding: 6px 39px 6px 39px;
padding: 3px 24px 3px 24px;
cursor: pointer;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .bottom-box border {
min-height: 36px;
padding: 3px 24px 3px 24px;
}
}
@media (max-width: 479px) {
.out-block-preim-box .bottom-box border {
min-height: 36px;
padding: 3px 24px 3px 24px;
}
}
.out-block-preim-box .bottom-box border:hover {
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
box-shadow: 3px 9px 20px 0px rgba(0, 0, 0, 0.35);
}
.out-block-preim-box .bottom-box border b {
display: block;
white-space: nowrap;
white-space: wrap;
font-size: 20px;
font-size: 16px;
line-height: 24px;
line-height: 19px;
font-weight: 600;
text-decoration: none;
color: #000;
text-align: center;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .bottom-box border b {
font-size: 16px;
line-height: 19px;
}
}
@media (max-width: 479px) {
.out-block-preim-box .bottom-box border b {
font-size: 14px;
line-height: 20px;
}
}
.out-block-preim-box .list-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 36px;
justify-content: center;
flex: 1 1 0;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .list-box {
gap: 10px;
margin-left: 20px;
}
}
@media (max-width: 479px) {
.out-block-preim-box .list-box {
gap: 0px;
margin: 0px;
}
}
.out-block-preim-box .out-block-preim-item {
width: 320px;
min-width: 320px;
max-width: 320px;
min-height: 300px;
min-height: 260px;
display: flex;
flex-direction: column;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .out-block-preim-item {
width: calc(30% - 20px);
min-width: 172px;
max-width: unset;
min-height: unset;
margin-bottom: 20px;
}
}
@media (max-width: 479px) {
.out-block-preim-box .out-block-preim-item {
width: 80%;
min-width: unset;
max-width: unset;
/* height: 210px; */
min-height: unset;
margin: 0px auto 10px auto;
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 360px) {
.out-block-preim-box .out-block-preim-item {
width: 80%;
margin: 0px auto 0px auto;
}
}
.out-block-preim-box .out-block-preim-item img {
width: 100px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
object-fit: contain;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .out-block-preim-item img {
width: 33%;
aspect-ratio: 1 / 1;
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
}
}
@media (max-width: 479px) {
.out-block-preim-box .out-block-preim-item img {
width: 20%;
width: 11vmax;
aspect-ratio: 1 / 1;
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
align-self: flex-start;
align-self: center;
margin: 30px auto 0px auto;
}
}
@media (max-width: 360px) {
.out-block-preim-box .out-block-preim-item img {
width: 9vmax;
margin: 30px 5px 10px 0px;
}
}
.out-block-preim-box .out-block-preim-item .text-item {
display: flex;
flex-direction: column;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .out-block-preim-item .text-item {
}
}
@media (max-width: 479px) {
.out-block-preim-box .out-block-preim-item .text-item {
width: 100%;
}
}
@media (max-width: 360px) {
.out-block-preim-box .out-block-preim-item .text-item {
}
}
.out-block-preim-box .out-block-preim-item .tit-item {
/* min-height: 111px; */
/* height: 100%; */
display: flex;
flex-direction: row;
justify-content: center;
justify-content: left;
align-items: stretch;
margin-top: 0px;
}
.out-block-preim-box .out-block-preim-item .tit-item b {
font-size: 30px;
line-height: 30px;
font-weight: 500;
text-align: left;
color: #054B81;
padding: 10px;
padding: 0px;
padding: 10px 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .out-block-preim-item .tit-item {
}
.out-block-preim-box .out-block-preim-item .tit-item b {
font-size: 2.1vmax;
line-height: 133%;
font-weight: 500;
text-align: left;
}
}
@media (max-width: 479px) {
.out-block-preim-box .out-block-preim-item .tit-item {
justify-content: center;
}
.out-block-preim-box .out-block-preim-item .tit-item b {
font-size: 3.5vmax;
line-height: 133%;
font-weight: 500;
text-align: center;
}
}
@media (max-width: 360px) {
.out-block-preim-box .out-block-preim-item .tit-item {
}
.out-block-preim-box .out-block-preim-item .tit-item b {
font-size: 2.9vmax;
}
}
.out-block-preim-box .out-block-preim-item .des-item {
height: 100%;
display: flex;
flex-direction: row;
justify-content: left;
align-items: stretch;
}
.out-block-preim-box .out-block-preim-item .des-item b {
font-size: 18px;
line-height: 25px;
font-weight: 500;
text-align: left;
color: #000;
padding: 10px 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-preim-box .out-block-preim-item .des-item {
}
.out-block-preim-box .out-block-preim-item .des-item b {
font-size: 1.5vmax;
line-height: 133%;
font-weight: 500;
text-align: left;
padding: 5px 15px 5px 0px;
}
}
@media (min-width: 1024px) {
.out-block-preim-box .out-block-preim-item .des-item b {
padding-right: 35px;
}
}
@media (max-width: 479px) {
.out-block-preim-box .out-block-preim-item .des-item {
min-height: unset;
}
.out-block-preim-box .out-block-preim-item .des-item b {
font-size: 2.1vmax;
line-height: 133%;
font-weight: 500;
text-align: left;
text-align: center;
}
}
@media (max-width: 360px) {
.out-block-preim-box .out-block-preim-item .des-item {
}
.out-block-preim-box .out-block-preim-item .des-item b {
font-size: 1.8vmax;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-block-banners-duo-box {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0px;
margin: 20px 0px;
justify-content: center;
align-items: center;
}
.out-block-banners-duo-box .banner-1
, .out-block-banners-duo-box .banner-2 {
max-width: 50%;
height: auto;
flex: 1 1 auto;
object-fit: cover;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-banners-duo-box .banner-1
, .out-block-banners-duo-box .banner-2 {
}
}
@media (max-width: 479px) {
.out-block-banners-duo-box .banner-1
, .out-block-banners-duo-box .banner-2 {
max-width: 100%;
height: auto;
flex: 1 1 100%;
flex-direction: column;
}
}
@media (max-width: 360px) {
.out-block-banners-duo-box .banner-1
, .out-block-banners-duo-box .banner-2 {
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-block-about-box a { text-decoration: none; }
.out-block-about-box {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 20px;
justify-content: center;
align-items: flex-start;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box {
}
}
@media (max-width: 479px) {
.out-block-about-box {
flex-direction: column;
}
}
@media (max-width: 360px) {
.out-block-about-box {
}
}
.out-block-about-box .text-box {
flex-grow: 6;
flex-shrink: 6;
flex-basis: 0;
display: flex;
flex-direction: column;
gap: 0px;
justify-content: left;
align-items: flex-start;
align-content: stretch;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box .text-box {
}
}
@media (max-width: 479px) {
.out-block-about-box .text-box {
margin: 0px 20px 0px 20px;
}
}
@media (max-width: 360px) {
.out-block-about-box .text-box {
}
}
.out-block-about-box .text-box h1 {
font-size: 220%;
line-height: 100%;
font-weight: 600;
color: #16789C;
color: #000;
color: #054B81;
margin: 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box .text-box h1 {
}
}
@media (max-width: 479px) {
.out-block-about-box .text-box h1 {
}
}
@media (max-width: 360px) {
.out-block-about-box .text-box h1 {
}
}
.out-block-about-box .text-box h2 {
font-size: 150%;
line-height: 150%;
font-weight: 500;
color: #16789C;
color: #000;
margin: 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box .text-box h1 {
}
}
@media (max-width: 479px) {
.out-block-about-box .text-box h1 {
}
}
@media (max-width: 360px) {
.out-block-about-box .text-box h1 {
}
}
.out-block-about-box .text-box .txt {
margin: 20px 0px 0px 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box .text-box .txt {
}
}
@media (max-width: 479px) {
.out-block-about-box .text-box .txt {
}
}
@media (max-width: 360px) {
.out-block-about-box .text-box .txt {
}
}
.out-block-about-box .img-box img { width: 100%; object-fit: }
.out-block-about-box .img-box {
align-self: stretch;
flex-grow: 3;
flex-shrink: 3;
flex-basis: 0;
display: flex;
flex-direction: row;
align-content: stretch;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box .img-box {
}
}
@media (max-width: 1023px) {
.out-block-about-box .img-box {
display: none;
}
}
@media (max-width: 479px) {
.out-block-about-box .img-box {
}
}
@media (max-width: 360px) {
.out-block-about-box .img-box {
}
}
.out-block-about-box .buttons-box {
align-self: stretch;
flex-grow: 3.5;
flex-shrink: 3.5;
flex-basis: 0;
display: flex;
flex-direction: column;
gap: 10px 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box .buttons-box {
}
}
@media (max-width: 479px) {
.out-block-about-box .buttons-box {
}
}
@media (max-width: 360px) {
.out-block-about-box .buttons-box {
}
}
.out-block-about-box .buttons-box a {
/* flex: 1 1 0; */
display: flex;
margin: 0px 20px 0px 20px;
}
.out-block-about-box .buttons-box .button-item:hover {
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.45);
box-shadow: 3px 9px 20px 0px rgba(0, 0, 0, 0.35);
}
.out-block-about-box .buttons-box .button-item {
padding: 20px 30px;
align-self: stretch;
width: 100%;
text-align: center;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-about-box .buttons-box .button-item {
}
}
@media (max-width: 479px) {
.out-block-about-box .buttons-box .button-item {
}
}
@media (max-width: 360px) {
.out-block-about-box .buttons-box .button-item {
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.outGloFooterBox {
width: 100%;
background: #054B81;
}
.out-block-footer-box * {
color: #fff;
text-decoration: none;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box * {
}
}
@media (max-width: 1023px) {
.out-block-footer-box * {
}
}
@media (max-width: 479px) {
.out-block-footer-box * {
}
}
@media (max-width: 360px) {
.out-block-footer-box * {
}
}
.out-block-footer-box {
display: flex;
flex-direction: column;
padding: 40px 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box {
}
}
@media (max-width: 479px) {
.out-block-footer-box {
}
}
@media (max-width: 360px) {
.out-block-footer-box {
}
}
.out-block-footer-box .info-box {
display: flex;
flex-direction: row;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .info-box {
}
}
@media (max-width: 768px) {
.out-block-footer-box .info-box {
flex-direction: column;
align-items: left;
margin: auto;
gap: 20px;
flex-basis: content;
}
}
@media (max-width: 479px) {
.out-block-footer-box .info-box {
}
}
@media (max-width: 360px) {
.out-block-footer-box .info-box {
}
}
.out-block-footer-box .urls-box {
flex: 6;
display: flex;
flex-direction: row;
gap: 20px;
padding-left: 20px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .urls-box {
}
}
@media (max-width: 768px) {
.out-block-footer-box .urls-box {
padding-left: 0px;
}
}
@media (max-width: 479px) {
.out-block-footer-box .urls-box {
flex-direction: column;
}
}
@media (max-width: 360px) {
.out-block-footer-box .urls-box {
}
}
.out-block-footer-box .addr-box {
flex: 4;
display: flex;
flex-direction: row;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .addr-box {
}
}
@media (max-width: 479px) {
.out-block-footer-box .addr-box {
flex-direction: column;
}
}
@media (max-width: 360px) {
.out-block-footer-box .addr-box {
}
}
.out-block-footer-box .c1 a
, .out-block-footer-box .c2 a {
display: block;
margin: 0px 0px 12px 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .c1 a
, .out-block-footer-box .c2 a {
}
}
@media (max-width: 768px) {
.out-block-footer-box .c1 a
, .out-block-footer-box .c2 a {
/* white-space: nowrap; */
}
}
@media (max-width: 479px) {
.out-block-footer-box .c1 a
, .out-block-footer-box .c2 a {
}
}
@media (max-width: 360px) {
.out-block-footer-box .c1 a
, .out-block-footer-box .c2 a {
}
}
.out-block-footer-box .c1 {
flex: 1;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .c1 {
}
}
@media (max-width: 479px) {
.out-block-footer-box .c1 {
}
}
@media (max-width: 360px) {
.out-block-footer-box .c1 {
}
}
.out-block-footer-box .c2 {
flex: 1;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .c2 {
}
}
@media (max-width: 479px) {
.out-block-footer-box .c2 {
}
}
@media (max-width: 360px) {
.out-block-footer-box .c2 {
}
}
.out-block-footer-box .icon img {
width: clamp(25px, 3.6vmax, 50px);
object-fit: contain;
margin: -6px 12px 0px 0px;
}
.out-block-footer-box .icon {
flex: 1;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .icon {
}
}
@media (max-width: 479px) {
.out-block-footer-box .icon {
display: none;
}
}
@media (max-width: 360px) {
.out-block-footer-box .icon {
}
}
.out-block-footer-box .addr-urls-box {
flex: 100;
display: flex;
flex-direction: row;
gap: 20px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .addr-urls-box {
}
}
@media (max-width: 479px) {
.out-block-footer-box .addr-urls-box {
}
}
@media (max-width: 360px) {
.out-block-footer-box .addr-urls-box {
}
}
.out-block-footer-box .c4 {
white-space: nowrap;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .c4 {
}
}
@media (max-width: 479px) {
.out-block-footer-box .c4 {
}
}
@media (max-width: 360px) {
.out-block-footer-box .c4 {
}
}
.out-block-footer-box .c5 {
white-space: nowrap;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .c5 {
}
}
@media (max-width: 479px) {
.out-block-footer-box .c5 {
}
}
@media (max-width: 360px) {
.out-block-footer-box .c5 {
}
}
.out-block-footer-box .cc {
font-size: 80%;
line-height: 150%;
text-align: center;
margin-top: 40px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-footer-box .cc {
padding: 0px 80px;
}
}
@media (max-width: 479px) {
.out-block-footer-box .cc {
padding: 0px 40px;
}
}
@media (max-width: 360px) {
.out-block-footer-box .cc {
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.outGloShapkaBox {
width: 100%;
box-shadow: 0px 10px 10px #ccc;
}
.out-block-shapka-box {
display: flex;
flex-direction: row;
}
@media (max-width: 799px) {
.out-block-shapka-box {
display: none;
}
}
.out-block-shapka-box a
, .out-block-shapka-m-box a {
text-decoration: none;
}
.out-block-shapka-m-box {
display: none;
}
@media (min-width: 480px) and (max-width: 800px) {
.out-block-shapka-m-box {
display: flex;
flex-direction: row;
}
}
@media (max-width: 479px) {
.out-block-shapka-m-box {
display: flex;
flex-direction: column;
}
}
.out-block-shapka-m-box .r1 {
display: flex;
flex-direction: row;
width: 100%;
}
.out-block-shapka-m-box .r2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
width: 100%;
padding: 0px 10px 0px 0px;
}
@media (max-width: 479px) {
.out-block-shapka-m-box .r2 {
align-items: center;
gap: 5px;
}
}
.out-block-shapka-m-box .burger-box {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 0px 15px 0px 5px;
}
.out-block-shapka-m-box .burger {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.out-block-shapka-m-box .burger-box .b1
, .out-block-shapka-m-box .burger-box .b2
, .out-block-shapka-m-box .burger-box .b3 {
width: 35px;
height: 5px;
background-color: #054B81;
margin: 4px 0;
transition: 0.4s;
}
.out-block-shapka-m-box .burger-box .act .b1 {
transform: translate(0, 11px) rotate(-45deg);
}
.out-block-shapka-m-box .burger-box .act .b2 { opacity: 0; }
.out-block-shapka-m-box .burger-box .act .b3 {
transform: translate(0, -11px) rotate(45deg);
}
.out-block-shapka-box .logo-box {
flex: 0 0 fit-content;
display: flex;
flex-direction: row;
align-items: center;
padding: 15px 10px 10px 10px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-shapka-box .logo-box {
}
}
@media (max-width: 768px) {
.out-block-shapka-box .logo-box {
}
}
@media (max-width: 479px) {
.out-block-shapka-box .logo-box {
}
}
@media (max-width: 360px) {
.out-block-shapka-box .logo-box {
}
}
.out-block-shapka-m-box .logo-box {
flex: 0 0 fit-content;
display: flex;
flex-direction: row;
align-items: center;
padding: 15px 10px 10px 10px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-shapka-m-box .logo-box {
}
}
@media (max-width: 768px) {
.out-block-shapka-m-box .logo-box {
}
}
@media (max-width: 479px) {
.out-block-shapka-m-box .logo-box {
}
}
@media (max-width: 360px) {
.out-block-shapka-m-box .logo-box {
}
}
.out-block-shapka-m-box .logo-box img {
width: 175px;
object-fit: contain;
}
@media (max-width: 479px) {
.out-block-shapka-m-box .logo-box img {
width: 60vw;
}
}
@media (max-width: 320px) {
.out-block-shapka-m-box .logo-box img {
}
}
.out-block-shapka-box .phone-box {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 20px 0px 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-shapka-box .phone-box {
}
}
@media (max-width: 768px) {
.out-block-shapka-box .phone-box {
}
}
@media (max-width: 479px) {
.out-block-shapka-box .phone-box {
}
}
@media (max-width: 360px) {
.out-block-shapka-box .phone-box {
}
}
.out-block-shapka-box .phone-box .spacer {
flex: 1 1 100%;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-shapka-box .phone-box .spacer {
}
}
@media (max-width: 768px) {
.out-block-shapka-box .phone-box .spacer {
}
}
@media (max-width: 479px) {
.out-block-shapka-box .phone-box .spacer {
}
}
@media (max-width: 360px) {
.out-block-shapka-box .phone-box .spacer {
}
}
.out-block-shapka-box .phone-box .bage a {
color: #fff;
color: #2E789E;
}
.out-block-shapka-box .phone-box .bage {
flex: 0 0 fit-content;
display: block;
padding: 10px 20px 10px 30px;
background: #2E789E;
background: transparent;
color: #2E789E;
font-weight: bold;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
font-size: 130%;
margin: 0px 0px 0px 30px;
cursor: pointer;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-shapka-box .phone-box .bage {
}
}
@media (max-width: 768px) {
.out-block-shapka-box .phone-box .bage {
}
}
@media (max-width: 479px) {
.out-block-shapka-box .phone-box .bage {
}
}
@media (max-width: 360px) {
.out-block-shapka-box .phone-box .bage {
}
}
.out-block-shapka-m-box .phone-box img {
width: 24px;
padding: 0px 10px 0px 0px;
object-fit: contain;
}
.out-block-shapka-m-box .phone-box {
display: flex;
flex-direction: row;
}
.out-block-shapka-m-box .phone-box .bage a {
color: #054B81;
}
.out-block-shapka-m-box .phone-box .bage {
display: block;
color: #054B81;
font-weight: bold;
font-size: 120%;
margin: 0px 0px 0px 0px;
cursor: pointer;
}
.out-block-shapka-box .phone-box .bage-tit a {
color: #16789C;
color: #fff;
}
.out-block-shapka-box .phone-box .bage-tit {
flex: 0 0 fit-content;
display: block;
padding: 8px 10px 10px 15px;
color: #16789C;
color: #fff;
background: #16789C;
font-size: 120%;
line-height: 130%;
border: 4px solid transparent;
border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
border-image-slice: 1;
}
@media (max-width: 900px) {
.out-block-shapka-box .phone-box .bage-tit {
display: none;
}
}
.out-block-shapka-box .sm-icon-box {
flex: 0 0 fit-content;
padding: 8px 10px 10px 15px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 15px;
}
.out-block-shapka-m-box .sm-icon-box {
flex: 0 0 fit-content;
padding: 0px 0px 10px 0px;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px 25px;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.outGloMenuBox {
width: 100%;
box-shadow: 0px 10px 10px #ccc;
}
.out-block-menu-box * { text-decoration: none; color: #000; }
.out-block-menu-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 799px) {
.out-block-menu-box.hide-mobile-menu {
display: none;
}
.out-block-menu-box {
display: block;
position: absolute;
left: 0px;
top: 0px;
background: #fff;
width: 100%;
height: 5000px;
z-index: 5000;
}
.out-block-menu-box .cross {
display: block;
position: fixed;
right: 10px;
top: 5px;
width: 32px;
padding: 10px;
cursor: pointer;
z-index: 1000;
}
.out-block-menu-box .cross * {
color: #aaa;
}
.out-block-menu-box .cross:hover * {
color: #0CA397;
}
}
.out-block-menu-box .tit {
white-space: nowrap;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-menu-box .tit {
}
}
@media (max-width: 479px) {
.out-block-menu-box .tit {
}
}
@media (max-width: 360px) {
.out-block-menu-box .tit {
}
}
.out-block-menu-box .main-item-group .tit-arrow-box {
display: flex;
flex-direction: row;
}
.out-block-menu-box .main-item-group .arrow { color: #16789C; padding: 0px 10px 0px 5px; }
.out-block-menu-box .main-item-group {
display: flex;
flex-direction: row;
position: relative;
cursor: pointer;
padding: 10px 20px;
z-index: 50;
}
@media (max-width: 799px) {
.out-block-menu-box .main-item-group {
display: flex;
flex-direction: column;
}
}
.out-block-menu-box .main-item-url {
cursor: pointer;
padding: 10px 20px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-menu-box .main-item-url {
}
}
@media (max-width: 479px) {
.out-block-menu-box .main-item-url {
}
}
@media (max-width: 360px) {
.out-block-menu-box .main-item-url {
}
}
.out-block-menu-box .sub-menu-box a.act { background: #5886442e; background: #F1F5F9;; }
.out-block-menu-box .sub-menu-box a.act .tit-box { color: #4b8249; color: #333; font-weight: bold; }
.out-block-menu-box .main-item-group:hover
, .out-block-menu-box .main-item-url:hover
, .out-block-menu-box .main-item-url:hover a
, .out-block-menu-box .sub-menu-box a:hover
, .out-block-menu-box .sub-menu-box a:hover .tit-box {
background: #F1F5F9;
color: #16789C;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-menu-box .main-item-group:hover
, .out-block-menu-box .main-item-url:hover
, .out-block-menu-box .main-item-url:hover a
, .out-block-menu-box .sub-menu-box a:hover
, .out-block-menu-box .sub-menu-box a:hover .tit-box {
}
}
@media (max-width: 479px) {
.out-block-menu-box .main-item-group:hover
, .out-block-menu-box .main-item-url:hover
, .out-block-menu-box .main-item-url:hover a
, .out-block-menu-box .sub-menu-box a:hover
, .out-block-menu-box .sub-menu-box a:hover .tit-box {
}
}
@media (max-width: 360px) {
.out-block-menu-box .main-item-group:hover
, .out-block-menu-box .main-item-url:hover
, .out-block-menu-box .main-item-url:hover a
, .out-block-menu-box .sub-menu-box a:hover
, .out-block-menu-box .sub-menu-box a:hover .tit-box {
}
}
.out-block-menu-box .sub-menu-box {
display: flex;
flex-direction: column;
position: absolute;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 5px 10px 10px #1c1c1c75;
background: #fff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: 900;
}
@media (max-width: 799px) {
.out-block-menu-box .sub-menu-box {
width: 95%;
position: initial;
box-shadow: none;
}
}
.out-block-menu-box .sub-menu-box a {
display: flex;
flex-direction: row;
padding: 10px 15px 10px 10px;
}
@media (max-width: 799px) {
.out-block-menu-box .sub-menu-box a {
box-shadow: 3px 3px 5px #ccc;
margin-bottom: 10px;
}
}
.out-block-menu-box .sub-menu-box a .tit-box {
color: #66778B;
white-space: nowrap;
}
@media (max-width: 799px) {
.out-block-menu-box .sub-menu-box a .tit-box {
white-space: wrap;
}
}
.out-block-menu-box .sub-menu-box a .icon-box {
padding: 0px 10px 0px 0px;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-menu-box .sub-menu-box a .icon-box {
}
}
@media (max-width: 479px) {
.out-block-menu-box .sub-menu-box a .icon-box {
}
}
@media (max-width: 360px) {
.out-block-menu-box .sub-menu-box a .icon-box {
}
}
.out-block-menu-box .sub-menu-box a .icon-box img {
max-width: 18px;
max-height: 18px;
object-fit: cover;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-menu-box .sub-menu-box a .icon-box {
}
}
@media (max-width: 479px) {
.out-block-menu-box .sub-menu-box a .icon-box {
}
}
@media (max-width: 360px) {
.out-block-menu-box .sub-menu-box a .icon-box {
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.outGloKaruselBox {
width: 100%;
box-shadow: 0px 10px 10px #ccc;
}
.out-block-karusel-box * { text-decoration: none; color: #000; }
.out-block-karusel-box {
background: #555;
background: transparent;
}
.out-block-karusel-box .banners-box {
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 640px;
height: var(--glo-karusel-height);
}
@media (max-width: 799px) {
.out-block-karusel-box .banners-box {
height: calc(var(--glo-karusel-height) * 0.75);
}
}
.out-block-karusel-box viewper {
display: block;
position: absolute;
top: 0px;
left: 0px;
display: flex;
flex-direction: row;
z-index: 1;
}
.out-block-karusel-box .karu-banner-box {
display: block;
width: clamp(150px, 100vw, 1200px);
position: relative;
}
.out-block-karusel-box .texts-box {
position: absolute;
left: 0px;
top: 00px;
width: 100%;
display: flex;
flex-direction: column;
margin: 0px 0px 0px 35px;
justify-content: center;
height: calc(var(--glo-karusel-height) - 40px);
z-index: 50;
}
@media (max-width: 799px) {
.out-block-karusel-box .texts-box {
height: calc((var(--glo-karusel-height) - 20px) * 0.85);
margin: 0px 0px 0px 35px;
}
}
.out-block-karusel-box .layout-center .texts-box {
align-items: center;
margin: 0px 0px 0px 0px;
height: auto;
padding: 30px 0px;
}
.out-block-karusel-box .layout-center .text-item-box {
text-align: center;
margin: 0px 0px 0px 0px;
}
.out-block-karusel-box .img-box {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 640px;
height: var(--glo-karusel-height);
z-index: 1;
}
@media (max-width: 799px) {
.out-block-karusel-box .img-box {
height: calc(var(--glo-karusel-height) * 0.75);
}
}
.out-block-karusel-box .points-box {
position: sticky;
bottom: -20px;
left: 50%;
display: flex;
flex-direction: row;
gap: 5px;
justify-content: center;
padding: 5px 0px 0px 0px;
}
.out-block-karusel-box .point-item-box {
padding: 5px;
border-radius: 5px;
background: #66778B;
border: 0px solid #000;
margin: 5px;
cursor: pointer;
}
.out-block-karusel-box .point-item-box.act {
background: #0CA397;
}
.out-block-karusel-box .point-item-box:hover {
background: #ff0000;
}
.out-block-karusel-box .font-sizer-1 {
font-size: 240%;
line-height: 125%;
font-weight: 800;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-karusel-box .font-sizer-1 {
font-size: 140%;
line-height: 130%;
width: 95vw;
}
}
@media (max-width: 479px) {
.out-block-karusel-box .font-sizer-1 {
font-size: 130%;
line-height: 125%;
width: 95vw;
}
}
.out-block-karusel-box .font-sizer-2 {
font-size: 175%;
line-height: 110%;
font-weight: 800;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-karusel-box .font-sizer-2 {
font-size: 130%;
line-height: 120%;
width: 95vw;
}
}
@media (max-width: 479px) {
.out-block-karusel-box .font-sizer-2 {
font-size: 120%;
line-height: 115%;
width: 95vw;
}
}
.out-block-karusel-box .font-sizer-3 {
font-size: 130%;
line-height: 110%;
font-weight: 500;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-karusel-box .font-sizer-3 {
font-size: 120%;
line-height: 105%;
width: 95vw;
}
}
@media (max-width: 479px) {
.out-block-karusel-box .font-sizer-3 {
font-size: 110%;
line-height: 105%;
width: 95vw;
}
}
.out-block-karusel-box .button-box border {
display: block;
padding: 12px 24px;
border-radius: 15px;
margin: 24px 0px 0px 0px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
width: fit-content;
white-space: nowrap;
font-size: 130%;
line-height: 110%;
font-weight: 600;
text-align: center;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-karusel-box .button-box border {
font-size: 110%;
line-height: 110%;
}
}
@media (max-width: 479px) {
.out-block-karusel-box .button-box border {
font-size: 90%;
line-height: 110%;
white-space: wrap;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-block-call-us-box * { color: #fff; }
.out-block-call-us-box {
background: #0CA397 center / cover url("/kva/img/block-shapka/call_us.jpg");
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
padding: 40px 0px;
}
@media (max-width: 479px) {
.out-block-call-us-box {
flex-direction: column;
}
}
.out-block-call-us-box .r1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.out-block-call-us-box .r2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.out-block-call-us-box input:placeholder { color: #66778B; letter-spacing: 1em; }
.out-block-call-us-box input {
padding: 10px;
font-size: 125%;
color: #66778B;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-call-us-box input {
font-size: 90%;
}
}
.out-block-call-us-box .lab {
font-size: 125%;
line-height: 125%;
margin: 0px 0px 10px 0px;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-call-us-box .lab {
font-size: 90%;
}
}
.out-block-call-us-box .button {
font-size: 125%;
line-height: 125%;
background: #79CD60;
padding: 15px 30px;
border-radius: 5px;
box-shadow: 10px 10px 10px #12796b;
margin: 15px 0px 0px 0px;
cursor: pointer;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-call-us-box .button {
font-size: 90%;
}
}
.out-block-call-us-box .ringer {
color: #fff;
display: flex;
flex-direction: row;
gap: 10px;
}
.out-block-call-us-box .ringer svg {
flex: 0 0 32px;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-call-us-box .ringer svg {
flex: 0 0 24px;
}
}
.out-block-call-us-box .ringer .phone-number {
flex: 1 1 auto;
font-size: 190%;
font-weight: 600;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-call-us-box .ringer .phone-number {
font-size: 120%;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-block-art-box * {
text-decoration: none;
color: #000;
}
.out-block-art-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-art-box {
gap: 16px;
align-content: center;
}
}
@media (max-width: 479px) {
.out-block-art-box {
flex-direction: column;
gap: 10px;
}
}
.out-block-art-box .art-item-box:hover {
box-shadow: 5px 5px 20px #ccc;
box-shadow: 3px 9px 20px 0px rgba(0, 0, 0, 0.35);
}
.out-block-art-box .art-item-box {
width: 240px;
min-width: 240px;
max-width: 240px;
/* height: 361px; */
min-height: 260px;
background: transparent;
padding: 10px;
display: flex;
flex-direction: column;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-art-box .art-item-box {
width: calc(21% - 20px);
min-width: 172px;
max-width: unset;
/* height: 210px; */
min-height: unset;
}
}
@media (max-width: 479px) {
.out-block-art-box .art-item-box {
width: auto;
width: 90%;
min-width: unset;
max-width: unset;
height: auto;
min-height: 80px;
margin: 0px 20px 0px 20px;
flex-direction: row;
align-items: stretch;
}
}
.out-block-art-box .img-box {
width: 240px;
min-width: 240px;
max-width: 240px;
height: 160px;
min-height: 160px;
max-height: 160px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-art-box .img-box {
width: 100%;
min-width: unset;
max-width: unset;
/* height: 150px; */
min-height: unset;
max-height: unset;
}
}
@media (max-width: 479px) {
.out-block-art-box .img-box {
flex: 0 0 120px;
width: unset;
height: auto;
min-width: unset;
max-width: unset;
min-height: unset;
}
}
.out-block-art-box .img-box img {
width: 240px;
min-width: 240px;
max-width: 240px;
min-height: 160px;
object-fit: cover;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-art-box .img-box img {
width: 100%;
aspect-ratio: 3 / 2;
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
}
}
@media (max-width: 479px) {
.out-block-art-box .img-box img {
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
width: 100%;
aspect-ratio: 3 / 2;
}
}
.out-block-art-box .tit-box {
min-height: 50px;
height: 100%;
color: #ffffff;
background: transparent;
padding: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
}
.out-block-art-box .tit-box b {
font-size: 120%;
line-height: 120%;
font-weight: 500;
text-align: left;
padding: 10px 0px 0px 0px
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-block-art-box .tit-box {
/* min-height: 30px; */
}
.out-block-art-box .tit-box b {
font-size: 1.6vmax;
line-height: 133%;
font-weight: 500;
text-align: left;
}
}
@media (max-width: 479px) {
.out-block-art-box .tit-box {
/* min-height: 80px; */
width: 100%;
height: 100%;
padding: 12px 12px 0px 12px;
padding: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.out-block-art-box .tit-box b {
width: 100%;
font-size: 24px;
font-size: 2.1vmax;
font-weight: 500;
line-height: 32px;
line-height: 133%;
text-align: center;
text-align: left;
padding: 0px 20px 12px 20px;
}
}
@media (max-width: 360px) {
.out-block-art-box .tit-box {
}
.out-block-art-box .tit-box b {
font-size: 1.8vmax;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-cats-box * {
text-decoration: none;
color: #000;
}
.out-cats-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
padding: 35px 0px 0px 0px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-cats-box {
gap: 16px;
align-content: center;
padding: 5px 0px 0px 0px;
}
}
@media (max-width: 479px) {
.out-cats-box {
flex-direction: column;
gap: 10px;
padding: 5px 0px 0px 0px;
}
}
.out-cats-box .out-cats-wares-list-box {
flex: 0 0 875px;
}
@media (min-width: 540px) and (max-width: 1024px) {
.out-cats-box .out-cats-wares-list-box {
flex: 0 0 60%;
}
}
@media (max-width: 539px) {
.out-cats-box .out-cats-wares-list-box {
flex: 1 1 auto;
}
}
.out-cats-box .out-cats-wares-list-box h1 {
padding: 0px 20px 15px 20px;
}
@media (min-width: 540px) and (max-width: 1024px) {
.out-cats-box .out-cats-wares-list-box h1 {
}
}
@media (max-width: 539px) {
.out-cats-box .out-cats-wares-list-box h1 {
}
}
.out-cats-box .out-cats-cats-list-box {
flex: 1 1 auto;
/* position: sticky; */
/* top: 20px; */
/* padding: 20px 15px 15px 40px; */
display: flex;
flex-direction: column;
}
@media (max-width: 540px) {
.out-cats-box .out-cats-cats-list-box {
}
}
.out-cats-box .out-cats-cats-list-box .cats-black {
position: sticky;
background: #f6f6f6;
border-radius: 15px;
}
.out-cats-box .out-cats-cats-list-box .cats-h1 {
border-bottom: 1px solid #d7d7d7;
padding: 15px 20px 10px 20px;
font-weight: bold;
font-size: 17px;
}
.out-cats-box .out-cats-cats-list-box .cats-urls {
padding: 20px 20px 20px 30px;
}
.out-cats-box .out-cats-cats-list-box .cats-urls .cat-item {
padding: 0px 0px 8px 0px;
font-size: 15px;
}
.out-cats-box .out-cats-cats-list-box .cats-urls .cat-item.act {
padding: 4px 0px 4px 16px;
border-left: 3px solid #f25529;
font-weight: bold;
margin-bottom: 8px;
}
/** */
.out-cats-box .wares-page {
padding: 0px 0px 15px 20px;
}
.out-cats-box .wares-urls
, .out-cats-custom-box .wares-urls {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
padding: 0px 0px 0px 5px;
}
.out-cats-box .ware-item-box:hover
, .out-cats-custom-box .ware-item-box:hover {
box-shadow: 5px 5px 20px #ccc;
box-shadow: 3px 9px 20px 0px rgba(0, 0, 0, 0.35);
}
.out-cats-box .ware-item-box
, .out-cats-custom-box .ware-item-box {
width: 240px;
min-width: 240px;
max-width: 240px;
/* height: 361px; */
min-height: 260px;
background: transparent;
border: 1px solid #E4E4E4;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-cats-box .ware-item-box
, .out-cats-custom-box .ware-item-box {
width: calc(21% - 20px);
min-width: 172px;
max-width: unset;
/* height: 210px; */
min-height: unset;
}
}
@media (max-width: 479px) {
.out-cats-box .ware-item-box
, .out-cats-custom-box .ware-item-box {
width: auto;
width: 90%;
min-width: unset;
max-width: unset;
height: auto;
min-height: 80px;
margin: 0px 20px 0px 20px;
flex-direction: row;
align-items: stretch;
}
}
.out-cats-box .ware-item-box .meta-box
, .out-cats-custom-box .ware-item-box .meta-box {
display: flex;
flex-direction: column;
}
.out-cats-box .ware-item-box .price
, .out-cats-custom-box .ware-item-box .price {
padding: 9px 0px 0px 3px ;
/* min-height: 50px; */
height: 100%;
}
.out-cats-box .ware-item-box .price span
, .out-cats-box .ware-item-box .price b
, .out-cats-custom-box .ware-item-box .price span
, .out-cats-custom-box .ware-item-box .price b {
font-size: 21px;
line-height: 16px;
font-size: 16px;
font-size: 14px;
line-height: 10px;
font-weight: 500;
color: #0b8c00;
}
@media (max-width: 479px) {
.out-cats-box .ware-item-box .price
, .out-cats-custom-box .ware-item-box .price {
padding: 9px 0px 0px 20px ;
}
}
.out-cats-box .img-box
, .out-cats-custom-box .img-box {
width: 240px;
min-width: 240px;
max-width: 240px;
height: 160px;
min-height: 160px;
max-height: 160px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-cats-box .img-box
, .out-cats-custom-box .img-box {
width: 100%;
min-width: unset;
max-width: unset;
/* height: 150px; */
min-height: unset;
max-height: unset;
}
}
@media (max-width: 479px) {
.out-cats-box .img-box
, .out-cats-custom-box .img-box {
flex: 0 0 120px;
width: unset;
height: auto;
min-width: unset;
max-width: unset;
min-height: unset;
}
}
.out-cats-box .img-box img
, .out-cats-custom-box .img-box img {
width: 240px;
min-width: 240px;
max-width: 240px;
min-height: 160px;
object-fit: cover;
aspect-ratio: 240/160;
border-radius: 10px;
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-cats-box .img-box img
, .out-cats-custom-box .img-box img {
width: 100%;
aspect-ratio: 3 / 2;
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
}
}
@media (max-width: 479px) {
.out-cats-box .img-box img
, .out-cats-custom-box .img-box img {
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
width: 100%;
aspect-ratio: 3 / 2;
}
}
.out-cats-box .tit-box
, .out-cats-custom-box .tit-box {
/* min-height: 50px; */
/* height: 100%; */
color: #ffffff;
background: transparent;
padding: 0px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: stretch;
}
.out-cats-box .tit-box b
, .out-cats-custom-box .tit-box b {
font-size: 120%;
font-size: 15px;
font-size: 16px;
line-height: 120%;
font-weight: 500;
font-weight: 900;
font-weight: 400;
text-align: left;
padding: 6px 0px 0px 0px
}
@media (min-width: 480px) and (max-width: 1304px) {
.out-cats-box .tit-box
, .out-cats-custom-box .tit-box {
/* min-height: 30px; */
}
.out-cats-box .tit-box b
, .out-cats-custom-box .tit-box b {
font-size: 1.6vmax;
line-height: 133%;
font-weight: 500;
text-align: left;
}
}
@media (max-width: 479px) {
.out-cats-box .tit-box
, .out-cats-custom-box .tit-box {
/* min-height: 80px; */
width: 100%;
height: 100%;
padding: 12px 12px 0px 12px;
padding: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.out-cats-box .tit-box b
, .out-cats-custom-box .tit-box b {
width: 100%;
font-size: 24px;
font-size: 2.1vmax;
font-size: 14px;
font-weight: 500;
line-height: 32px;
line-height: 133%;
text-align: center;
text-align: left;
padding: 0px 20px 12px 20px;
}
}
@media (max-width: 360px) {
.out-cats-box .tit-box
, .out-cats-custom-box .tit-box {
}
.out-cats-box .tit-box b
, .out-cats-custom-box .tit-box b {
font-size: 1.8vmax;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-cats-ware-page-bread-box * {
text-decoration: none;
color: #000;
}
.out-cats-ware-page-bread-box {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
gap: 5px;
padding: 25px 0px 10px 0px;
border-bottom: 1px solid #e4e4e4;
}
.out-cats-ware-page-bread-box .su {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
gap: 5px;
}
@media (max-width: 768px) {
.out-cats-ware-page-bread-box {
padding: 15px 15px 20px 15px;
margin-bottom: 12px;
flex-direction: column;
}
}
.out-cats-ware-page-bread-box .url.cat a:hover {
color: #16789c;
}
.out-cats-ware-page-bread-box .url.cat a {
color: #848484;
font-size: 15px;
white-space: nowrap;
}
.out-cats-ware-page-bread-box .url.page {
color: #b7b7b7;
font-size: 15px;
/* text-wrap-mode: nowrap; */
text-wrap: nowrap;
white-space-collapse: collapse
}
.out-cats-ware-page-bread-box .slash {
color: #b6b6b6;
font-size: 15px;
}
/** */
.out-cats-ware-page-box * {
text-decoration: none;
color: #000;
}
.out-cats-ware-page-box {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 35px 0px 35px 0px;
padding: 35px 0px 0px 0px;
gap: 25px;
}
.out-cats-ware-page-box-2 {
padding: 18px 0px 35px 0px;
}
@media (max-width: 768px) {
.out-cats-ware-page-box {
flex-direction: column;
gap: 10px;
padding: 0px 15px 0px 15px;
}
.out-cats-ware-page-box-2 {
padding: 0px 15px 0px 15px;
}
}
.out-cats-ware-page-box .img-ico-frame {
width: 75px;
width: 50px;
}
.out-cats-ware-page-box .img-frame {
width: 45%;
}
.out-cats-ware-page-box .des-frame {
/* width: 30%; */
}
@media (max-width: 768px) {
.out-cats-ware-page-box .img-ico-frame {
width: 96%;
}
.out-cats-ware-page-box .img-frame {
width: 96%;
}
.out-cats-ware-page-box .des-frame {
width: 96%;
}
}
/** */
.out-cats-ware-page-box .img-frame .main-img-box {
/* width: 100%; */
background: #f6f6f8;
border: 1px solid #e4e4e4;
border-radius: 10px;
padding: 0px 24px 0px 24px;
}
.out-cats-ware-page-box .img-frame .main-img {
width: 100%;
aspect-ratio: 1/1;
object-fit: contain;
}
/** */
.out-cats-ware-page-box .img-ico-frame {
display: flex;
flex-direction: column;
gap: 6px;
}
.out-cats-ware-page-box .img-ico-frame .ico-box {
aspect-ratio: 1/1;
cursor: pointer;
}
.out-cats-ware-page-box .img-ico-frame img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border: 1px solid #e4e4e4;
}
@media (max-width: 768px) {
.out-cats-ware-page-box .img-ico-frame {
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
}
.out-cats-ware-page-box .img-ico-frame .ico-box {
width: 75px;
}
}
/** */
.out-cats-ware-page-box .price-box {
padding: 18px 0px 6px 0px;
}
.out-cats-ware-page-box .price-lab {
font-size: 15px;
color: #666;
padding: 0px 0px 8px 0px;
}
.out-cats-ware-page-box .price, .out-cats-ware-page-box .price b {
font-size: 26px;
line-height: 20px;
}
.out-cats-ware-page-box .act-button-box {
padding: 18px 0px 18px 0px;
}
.out-cats-ware-page-box .act-button-box .ui-act-button {
width: fit-content;
}
.out-cats-ware-page-box h1
, .out-cats-ware-page-box h2
, .out-cats-ware-page-box h3 {
margin: 0px;
}
.out-cats-ware-page-box h2
, .out-cats-ware-page-box h3 {
margin-bottom: 12px;
}
.out-cats-ware-page-box .des-box {
padding: 18px 0px 0px 0px;
}
.out-cats-ware-page-box .des-box
, .out-cats-ware-page-box-2 .des-2-box {
font-size: 15px;
font-size: 16px;
color: #666;
text-align: justify;
text-wrap: balance;
}
@media (max-width: 767px) {
.out-cats-ware-page-box-2 .des-2-box {
padding-top: 20px;
padding-bottom: 30px;
}
}
/** */
.ui-act-button a { text-decoration: none; }
.ui-act-button.bottom-box border {
display: flex;
border: 1px solid rgb(12, 163, 151);
border: 1px solid #15a1B2;
justify-content: center;
align-items: center;
min-height: 48px;
min-height: 36px;
padding: 6px 39px 6px 39px;
padding: 3px 24px 3px 24px;
cursor: pointer;
}
@media (min-width: 480px) and (max-width: 1304px) {
.ui-act-button.bottom-box border {
min-height: 36px;
padding: 3px 24px 3px 24px;
}
}
@media (max-width: 479px) {
.ui-act-button.bottom-box border {
min-height: 36px;
padding: 3px 24px 3px 24px;
}
}
.ui-act-button.bottom-box border:hover {
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
box-shadow: 3px 9px 20px 0px rgba(0, 0, 0, 0.35);
}
.ui-act-button.bottom-box border b {
display: block;
white-space: nowrap;
white-space: wrap;
font-size: 20px;
font-size: 16px;
line-height: 24px;
line-height: 19px;
font-weight: 600;
text-decoration: none;
color: #000;
text-align: center;
}
@media (min-width: 480px) and (max-width: 1304px) {
.ui-act-button.bottom-box border b {
font-size: 16px;
line-height: 19px;
}
}
@media (max-width: 479px) {
.ui-act-button.bottom-box border b {
font-size: 14px;
line-height: 20px;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.page-pre-spacer {
font-size: 10px;
line-height: 10px;
}
.page-reader {
width: clamp(50%, 720px, 100%);
}
@media (max-width: 799px) {
.page-reader {
width: 100%;
}
}
.out-content-page {
display: flex;
flex-direction: row;
padding: 25px 0px 0px 0px;
}
@media (max-width: 540px) {
.out-content-page {
flex-direction: column;
padding: 20px 0px 45px 0px;
}
}
.out-content-page .text-box {
flex: 0 0 720px;
}
@media (min-width: 540px) and (max-width: 1024px) {
.out-content-page .text-box {
flex: 0 0 60%;
}
}
@media (max-width: 539px) {
.out-content-page .text-box {
flex: 1 1 auto;
}
}
.out-content-page .art-list-box {
flex: 1 1 auto;
/* position: sticky; */
top: 20px;
padding: 20px 15px 15px 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-width: 540px) {
.out-content-page .art-list-box {
}
}
.out-content-page .art-item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
}
.out-content-page .art-item.act {
background: #F1F5F9;
border-radius: 10px;
padding: 15px 15px 15px 15px
}
.out-content-page .art-item.act a {
text-decoration: none;
color: #333;
}
.out-content-page .art-item.emp {
line-height: 1px;
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 5px;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-block-faq-box {
}
#out-block-faq-send-form {
box-shadow: 5px 5px 15px #ccc;
padding: 15px;
border-radius: 10px;
margin: 15px 20px 25px 0px;
}
@media (max-width: 479px) {
#out-block-faq-send-form {
margin-left: 15px;
}
}
#out-block-faq-send-form #faq-from { height: 42px; }
#out-block-faq-send-form #faq-txt { height: 175px; }
#out-block-faq-send-form .lab-1 { padding: 0px 0px 3px 0px; }
#out-block-faq-send-form .lab-2 { padding: 12px 0px 3px 0px; }
#out-block-faq-send-form outButton { margin: 12px 0px 12px 0px; }
#out-block-faq-send-form textarea { max-width: 90%; }
#out-block-faq-send-form textarea {
padding: 6px 6px;
color: #0eb600;
font-weight: bold;
font-size: 100%;
}
.out-faq-item-box {
margin-bottom: 32px;
}
@media (max-width: 479px) {
.out-faq-item-box {
margin: 0px 15px;
margin-bottom: 32px;
}
}
.out-faq-sent-ok {
background: #c9e660;
padding: 20px;
border-radius: 10px;
box-shadow: 3px 3px 5px #eee;
text-wrap: balance;
}
.answer-item-box {
padding: 12px 0px 12px 32px;
}
.ask-cdate { font-family: monospace; font-size: 80%; color: #07b443; font-weight: bold; }
.ask-who { font-family: monospace; font-size: 90%; color: #92970c; font-weight: bold; }
.answer-who { font-family: monospace; font-size: 90%; color: #720c97; font-weight: bold; }
.answer-txt { color: #782929; }
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.out-block-how-we-work-box-top {
background: #16789C;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.out-block-how-we-work-box-top .L1 {
color:#79CD60;
text-align:center;
background:inherit;
margin: 0px;
}
.out-block-how-we-work-box-top .L2 {
color: #ffffff;
text-align:center;
background:inherit;
margin: 0px;
}
/** */
.out-block-how-we-work-box-bottom {
background: #16789C;
padding: 0px 20px 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 1024px) {
.out-block-how-we-work-box-bottom {
background: transparent;
padding: 0px 30px;
}
}
.out-block-how-we-work-box-bottom .button {
font-size: 125%;
line-height: 125%;
color: #fff;
background: #79CD60;
padding: 15px 30px;
border-radius: 5px;
box-shadow: 10px 10px 10px #12796b;
margin: 15px 0px 0px 0px;
cursor: pointer;
text-align: center;
}
@media (min-width: 480px) and (max-width: 799px) {
.out-block-how-we-work-box-bottom .button {
font-size: 90%;
}
}
/** */
@media (min-width: 1200px) { .out-block-how-we-work-box { height: 240px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .out-block-how-we-work-box { height: 240px; } }
@media (min-width: 900px) and (max-width: 1023px) { .out-block-how-we-work-box { height: 220px; } }
@media (min-width: 780px) and (max-width: 899px) { .out-block-how-we-work-box { height: 180px; } }
@media (min-width: 480px) and (max-width: 779px) { .out-block-how-we-work-box { height: 200px; } }
@media (max-width: 479px) { .out-block-how-we-work-box { height: 180px; } }
.out-block-how-we-work-box {
background: #16789C;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
@media (max-width: 1024px) {
.out-block-how-we-work-box {
position: relative;
overflow-x: auto;
overflow-y: hidden;
background: transparent;
margin-top: 15px;
}
}
.out-block-how-we-work-box .out-canvas-abs {
width: clamp(720px, 100%, 1100px);
display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 15px;
}
@media (max-width: 1024px) {
.out-block-how-we-work-box .out-canvas-abs {
position: absolute;
top: 0px;
left: 0px;
}
}
.out-how-we-work-item {
width: 250px;
}
@media (max-width: 1024px) {
.out-how-we-work-item {
}
}
.out-how-we-work-item img {
width: 180px;
}
@media (min-width: 801px) and (max-width: 960px) {
.out-how-we-work-item img {
width: 165px;
}
}
@media (max-width: 800px) {
.out-how-we-work-item img {
width: 165px;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#outCallUsForm {
display: block;
display: none;
z-index: 920;
position: fixed;
top: 30px; left: 30px;
min-width: 320px;
min-height: 240px;
width: 320px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
background: #197da9 left / cover url("/kva/img/block-shapka/call-us-background-popup.jpg");
left: 50%;
transform: translate(-50%, 0);
}
#outCallUsForm close {
position: absolute;
top: 20px; right: 20px;
border-bottom: 1px dotted #eee;
color: #eee;
cursor: pointer;
font-size: small;
}
#outCallUsFormBack {
display: block;
display: none;
z-index: 910;
position: fixed;
width: 100%;
height: 100%;
background: rgba(36, 33, 30, 0.31);
cursor: pointer;
}
.outCallUsFormBox {
padding: 40px 100px 20px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
padding: 40px 0px;
}
.outCallUsFormBox img.logo-form {
width: clamp(32px, 20%, 72px);
}
.outCallUsFormBox input:placeholder { color: #66778B; letter-spacing: 1em; }
.outCallUsFormBox input {
padding: 10px;
font-size: 125%;
color: #66778B;
}
@media (min-width: 480px) and (max-width: 799px) {
.outCallUsFormBox input {
font-size: 90%;
}
}
.outCallUsFormBox .lab {
font-size: 125%;
line-height: 125%;
font-weight: 600;
text-align: center;
margin: 0px 0px 10px 0px;
color: #eee;
}
@media (min-width: 480px) and (max-width: 799px) {
.outCallUsFormBox .lab {
font-size: 90%;
}
}
.outCallUsFormBox .legal a {
color: #eee;
font-size: 100%;
}
.outCallUsFormBox .legal {
font-size: 80%;
line-height: 125%;
margin: 0px 15px 10px 15px;
color: #eee;
}
@media (min-width: 480px) and (max-width: 799px) {
.outCallUsFormBox .legal {
font-size: 60%;
}
}
.outCallUsFormBox .button {
font-size: 125%;
line-height: 125%;
background: #79CD60;
padding: 15px 30px;
border-radius: 5px;
box-shadow: 10px 10px 10px #12796b;
margin: 15px 0px 0px 0px;
cursor: pointer;
color: #eee;
}
@media (min-width: 480px) and (max-width: 799px) {
.outCallUsFormBox .button {
font-size: 90%;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#outQueryUsForm {
display: block;
display: none;
z-index: 920;
position: fixed;
top: 30px; left: 30px;
min-width: 320px;
min-height: 240px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
background: #16789d left / cover no-repeat url("/kva/img/block-shapka/call-us-background.jpg");
left: 50%;
transform: translate(-50%, 0);
}
#outQueryUsInlineForm {
display: block;
width: clamp(320px, 96%, 640px);
height: fit-content;
min-width: 320px;
min-height: 240px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
background: #16789d left / cover no-repeat url("/kva/img/block-shapka/call-us-background.jpg");
margin: 0px auto;
padding: 20px;
}
@media (max-width: 479px) {
#outQueryUsForm {
background-image: none;
overflow-x: hidden;
overflow-y: scroll;
max-height: 90vh;
}
#outQueryUsInlineForm {
background-image: none;
border-radius: 0px;
margin: 0px;
padding: 5px;
}
}
#outQueryUsForm close {
position: absolute;
top: 20px; right: 20px;
border-bottom: 1px dotted #eee;
color: #eee;
cursor: pointer;
font-size: small;
}
#outQueryUsFormBack {
display: block;
display: none;
z-index: 910;
position: fixed;
width: 100%;
height: 100%;
background: rgba(36, 33, 30, 0.31);
cursor: pointer;
}
.outQueryUsFormBox {
padding: 40px 100px 20px 20px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
padding: 0px 0px 40px 0px;
}
@media (max-width: 549px) {
.outQueryUsFormBox {
flex-direction: column;
}
}
.outQueryUsFormBox .r1 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 5px;
margin: 0px 20px 0px 20px;
}
.outQueryUsFormBox .r2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 5px;
margin: 0px 20px 0px 20px;
}
.outQueryUsFormBox textarea#out-query-us-inline-form-text
, .outQueryUsFormBox textarea#out-query-us-form-text {
height: 175px;
width: clamp(125px, 90%, 320px);
padding: 6px 6px;
font-size: 105%;
font-weight: bold;
font-family: monospace;
color: #4c8607;
}
.outQueryUsFormBox input:placeholder { color: #66778B !important; letter-spacing: 1em; }
.outQueryUsFormBox input {
padding: 10px;
font-size: 125%;
color: #4c8607;
color: #66778B;
width: clamp(125px, 90%, 350px);
}
@media (min-width: 480px) and (max-width: 799px) {
.outQueryUsFormBox input {
font-size: 90%;
}
}
.outQueryUsFormBox .star {
position: relative;
}
.outQueryUsFormBox .star b {
position: absolute;
top: -6px;
left: 5px;
color: #ff8c26;
font-weight: bold;
font-family: monospace;
}
.outQueryUsFormBox .lab {
font-size: 100%;
line-height: 125%;
font-weight: 600;
text-align: center;
margin: 12px 0px 6px 0px;
color: #eee;
text-shadow: 1px 1px 5px #0C4154;
}
@media (min-width: 480px) and (max-width: 799px) {
.outQueryUsFormBox .lab {
font-size: 90%;
}
}
.outQueryUsFormBox .legal a {
color: #eee;
font-size: 100%;
}
.outQueryUsFormBox .legal {
font-size: 80%;
line-height: 125%;
margin: 15px 15px 10px 0px;
color: #eee;
}
@media (min-width: 480px) and (max-width: 799px) {
.outQueryUsFormBox .legal {
font-size: 60%;
}
}
.outQueryUsFormBox .button {
font-size: 125%;
line-height: 125%;
background: #79CD60;
padding: 15px 30px;
border-radius: 5px;
box-shadow: 10px 10px 10px #12796b;
margin: 15px 0px 0px 0px;
cursor: pointer;
color: #eee;
}
@media (min-width: 480px) and (max-width: 799px) {
.outQueryUsFormBox .button {
font-size: 90%;
}
}
/** */
.outQueryUsFormBox .ready b { font-size: 150%; color: #eee; text-shadow: 5px 5px 5px #32668c; }
.outQueryUsFormBox .ready {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 240px;
}
/** */
.outQueryUsFormTit {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
margin: 20px 0px 5px 0px;
}
@media (max-width: 479px) {
.outQueryUsFormTit {
margin-top: 45px;
}
}
.outQueryUsFormTit img.logo-form {
width: clamp(32px, 15%, 48px);
}
.outQueryUsFormTit .tit {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.outQueryUsFormTit .tit div {
color: #eee;
font-size: 135%;
font-weight: bold;
align-self: center;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#outPopupForm {
display: block;
display: none;
z-index: 920;
position: fixed;
top: 30px; left: 30px;
min-width: 320px;
min-height: 240px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
background: #16789d left / cover no-repeat url("/kva/img/block-shapka/call-us-background.jpg");
left: 50%;
transform: translate(-50%, 0);
}
#outPopupInlineForm {
display: block;
width: clamp(320px, 96%, 640px);
height: fit-content;
min-width: 320px;
min-height: 240px;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
background: #16789d left / cover no-repeat url("/kva/img/block-shapka/call-us-background.jpg");
margin: 0px auto;
padding: 20px;
}
@media (max-width: 479px) {
#outPopupForm {
background-image: none;
overflow-x: hidden;
overflow-y: scroll;
max-height: 90vh;
}
#outPopupInlineForm {
background-image: none;
border-radius: 0px;
margin: 0px;
padding: 5px;
}
}
#outPopupForm close {
position: absolute;
top: 20px; right: 20px;
border-bottom: 1px dotted #eee;
color: #eee;
cursor: pointer;
font-size: small;
}
#outPopupFormBack {
display: block;
display: none;
z-index: 910;
position: fixed;
width: 100%;
height: 100%;
background: rgba(36, 33, 30, 0.31);
cursor: pointer;
}
.outPopupFormBox {
padding: 40px 100px 20px 20px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
padding: 0px 0px 40px 0px;
}
@media (max-width: 549px) {
.outPopupFormBox {
flex-direction: column;
}
}
.outPopupFormBox .r1 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 5px;
margin: 0px 20px 0px 20px;
}
.outPopupFormBox .r2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 5px;
margin: 0px 20px 0px 20px;
}
.outPopupFormBox textarea#out-popup-inline-form-text
, .outPopupFormBox textarea#out-popup-form-text {
height: 175px;
width: clamp(125px, 90%, 320px);
padding: 6px 6px;
font-size: 105%;
font-weight: bold;
font-family: monospace;
color: #4c8607;
}
.outPopupFormBox input:placeholder { color: #66778B !important; letter-spacing: 1em; }
.outPopupFormBox input {
padding: 10px;
font-size: 125%;
color: #4c8607;
color: #66778B;
width: clamp(125px, 90%, 350px);
}
@media (min-width: 480px) and (max-width: 799px) {
.outPopupFormBox input {
font-size: 90%;
}
}
.outPopupFormBox .star {
position: relative;
}
.outPopupFormBox .star b {
position: absolute;
top: -6px;
left: 5px;
color: #ff8c26;
font-weight: bold;
font-family: monospace;
}
.outPopupFormBox .lab {
font-size: 100%;
line-height: 125%;
font-weight: 600;
text-align: center;
margin: 12px 0px 6px 0px;
color: #eee;
text-shadow: 1px 1px 5px #0C4154;
}
@media (min-width: 480px) and (max-width: 799px) {
.outPopupFormBox .lab {
font-size: 90%;
}
}
.outPopupFormBox .legal a {
color: #eee;
font-size: 100%;
}
.outPopupFormBox .legal {
font-size: 80%;
line-height: 125%;
margin: 15px 15px 10px 0px;
color: #eee;
}
@media (min-width: 480px) and (max-width: 799px) {
.outPopupFormBox .legal {
font-size: 60%;
}
}
.outPopupFormBox .button {
font-size: 125%;
line-height: 125%;
background: #79CD60;
padding: 15px 30px;
border-radius: 5px;
box-shadow: 10px 10px 10px #12796b;
margin: 15px 0px 0px 0px;
cursor: pointer;
color: #eee;
}
@media (min-width: 480px) and (max-width: 799px) {
.outPopupFormBox .button {
font-size: 90%;
}
}
/** */
.outPopupFormBox .ready b { font-size: 150%; color: #eee; text-shadow: 5px 5px 5px #32668c; }
.outPopupFormBox .ready {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 240px;
}
/** */
.outPopupFormTit {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
margin: 20px 0px 5px 0px;
}
@media (max-width: 479px) {
.outPopupFormTit {
margin-top: 45px;
}
}
.outPopupFormTit img.logo-form {
width: clamp(32px, 15%, 48px);
}
.outPopupFormTit .tit {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.outPopupFormTit .tit div {
color: #eee;
font-size: 135%;
font-weight: bold;
align-self: center;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * */