html{
height:100%;
}
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
@font-face {
font-family: 'UAFSans-CondBlack';
src: local('UAFSans-CondBlack'), url('/themes/uanavy/css/font/UAFSans-CondBlack.otf') format('opentype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'UAFSans';
src: local('UAFSans'), local('UAFSans'), url('/themes/uanavy/css/font/UAFSans-Regular.ttf') format('truetype');
font-weight:400;
font-style: normal;
}
@font-face {
font-family: 'UAFSans';
src: local('UAFSans'), local('UAFSans'), url('/themes/uanavy/css/font/UAFSans-Medium.ttf') format('truetype');
font-weight:500;
font-style: normal;
}
@font-face {
font-family: 'UAFSans';
src: local('UAFSans'), local('UAFSans'), url('/themes/uanavy/css/font/UAFSans-SemiBold.ttf') format('truetype');
font-weight:700;
font-style: normal;
}
@font-face {
font-family: 'UAFSans';
src: local('UAFSans'), local('UAFSans'), url('/themes/uanavy/css/font/UAFSans-Bold.ttf') format('truetype');
font-weight:900;
font-style: normal;
}
input, textarea {outline:none!important;}
input:active, textarea:active {outline:none!important;}
:focus {outline:none!important;}
a:hover{text-decoration:none!important}
.mobile-filter{display:none!important}
.mobile-block, .mobile-one-info, .mobile-chevron, .mobile-header{display:none;}
.mobile-ver{display:none;}
.mobile-brigades, .brigades-toggle{display:none}
#main-menu, #menu-toggle, .menu-header, .menu-title.main-title, .menu-close-button, .mobile-unit, .mobile-hero-section, .mobile-taxonomy-hero-section {display: none;}
.js-form-type-textfield.js-form-item-email{
border:1px solid red;
position:absolute;
top:-150%;
left:-150%;
}
/**/
.vacancy-form .webform-readonly.js-form-item.js-form-type-textfield{display:none}
.side-form .js-form-item-unit{display:none!important}
.side-form .js-form-item-position-name{display:none!important}
/**/
.wrapper-login {
position: relative;
width: 100%;
height: 100%;
min-height: 99.9vh;
min-width: 100vw;
background-image: url('/themes/uanavy/images/loginpage.webp');
background-size: cover;
background-position: center;
background-repeat:no-repeat;
display: flex;
justify-content: center; /* центрування по горизонталі */
align-items: center; /* центрування по вертикалі */
overflow:hidden!important;
background-color:#222222;
}
.wrapper-login:after{
content:'';
position:absolute;
top:0;
backdrop-filter: blur(35px);
width:100%;
height:100%;
z-index:9;
background:transparent;
left:0;
z-index:5;
}
/* Центруємо форму */
.user-login-form,
.email-tfa-email-tfa-verify-login {
max-width: 440px;
z-index:9;
margin:-2em auto 0;
background: rgba(255, 255, 255, 0.85);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
padding: 32px 24px;
backdrop-filter: blur(10px);
position: relative;
font-family: 'UAFSans';
}
/* Заголовок */
.user-login-form::before {
content: "";
display: block;
width: 74px;
height: 74px;
background: #E5F6FE url("/themes/uanavy/images/user-logo.png") no-repeat center center;
background-size: 100%;
border-radius: 50%;
margin: 0 auto 16px;
}
.email-tfa-email-tfa-verify-login::before {
content: "";
display: block;
width: 74px;
height: 74px;
background: #E5F6FE url("/themes/uanavy/images/sprut-logo.png") no-repeat center center;
background-size: 100%;
border-radius: 50%;
margin: 0 auto 16px;
}
/* Поля форми */
.email-tfa-email-tfa-verify-login .form-item ,
.user-login-form .form-item {
position: relative;
margin-bottom: 20px;
}
.email-tfa-email-tfa-verify-login label,
.user-login-form label {
display: none;
}
/* Стиль інпутів */
.user-login-form input.form-text {
width: 85%;
padding: 14px 16px;
border: 1px solid #ddd;
border-radius: 10px;
background: #f7f9fa;
font-size: 15px;
transition: border 0.2s, box-shadow 0.2s;
}
.email-tfa-email-tfa-verify-login input.form-text{
width: 85%;
padding: 14px 16px;
border: 1.4px solid #0399B5;
border-radius: 10px;
background: #f7f9fa;
font-size: 15px;
margin-bottom:20px;
transition: border 0.2s, box-shadow 0.2s;
font-family: 'UAFSans';
}
#edit-verify--description{
font-family: 'UAFSans';
font-size:.9em;
margin:5px 0 25px;
}
/* Додаткові стилі для полів з іконками */
.email-tfa-email-tfa-verify-login input.form-text.with-icon ,
.user-login-form input.form-text.with-icon {
padding-left: 44px;
background-repeat: no-repeat;
background-position: 14px center;
background-size: 18px;
}
/* Email іконка */
.user-login-form input.form-text.email-icon {
background-image: url("data:image/svg+xml;utf8,");
}
/* Password іконка */
#edit-verify,
.user-login-form input.form-text.password-icon {
background-image: url("data:image/svg+xml;utf8,");
}
/* Фокус */
.user-login-form input.form-text:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
outline: none;
}
/* Кнопка */
.email-tfa-email-tfa-verify-login .form-actions input.form-submit ,
.user-login-form .form-actions input.form-submit {
width: 100%;
background: #000;
color: #fff;
font-weight: 600;
padding: 16px 0;
border: none;
border-radius: 10px;
font-size: .85em;
cursor: pointer;
margin:.55em 0 0;
transition: background 0.2s;
font-family: 'UAFSans';
}
.email-tfa-email-tfa-verify-login .form-actions input.form-submit:hover ,
.user-login-form .form-actions input.form-submit:hover {
background: #165494;
}
/* Текст-підказки */
.user-login-form .description {
font-size: 13px;
color: #555;
margin-top: 6px;
}
.user-body [data-drupal-messages] {
margin-top: 1.2em;
padding: 14px 18px;
background-color: #ffe0e0;
color: #900;
border: 1px solid #f5c2c2;
border-radius: 10px;
font-size:.75em;
line-height: 1.5;
font-family: 'UAFSans';
}
.user-body [data-drupal-messages] a {
color: #900;
text-decoration: underline;
}
.user-body [data-drupal-messages] h2.visually-hidden {
display: none;
}
.email-tfa-email-tfa-verify-login input[type="submit"]{
position: relative;
padding: 14px 30px 14px;
display: inline-block;
background: #0399B5;
border:none;
cursor:pointer;
color: #fff;
font-size: .82em;
margin-right:25px;
line-height:1;
letter-spacing: .05px;
overflow: hidden;
font-family: 'UAFSans';
box-shadow: 0 0 3.5px rgba(0, 0, 0, .15);
font-weight: 600;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: color 0.65s ease-in-out, border-color 0.65s ease-in-out;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.email-tfa-email-tfa-verify-login input[type="submit"]:last-child{
margin-right:0!important;
}
.email-tfa-email-tfa-verify-login input[type="submit"]:hover {
color: white;
background: #222222;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
/**/
.blog-page-title{
display:block;
margin:.35em 0 .2em;
text-align:center;
font-size: 4.4em;
font-weight: 700;
font-family: Oswald !important;
}
.first-article {
display: flex;
align-items: center;
position: relative;
background-color: #222123;
width: 94%;
height:75vh;
overflow:hidden;
margin: 2em auto 3em;
}
.first-article-info {
position: absolute;
left: 6%;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
width: 32%;
height: 70%;
padding: 2.5rem;
display: flex;
align-items: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.text-article {
width: 100%;
}
.text-article h2 {
font-size: 1.5rem;
margin-bottom: 0.8rem;
color: #000;
}
.text-article h2:after{
content:'';
width:100px;
height:2.5px;
display:block;
position:relative;
margin:10px 0 20px;
background:#0399B5;
}
.text-article a{
color: #000;
}
.text-article a:hover{
color:#0399B5;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.date{
font-size:.82em;
color:rgba(30,30,30,.35);
font-weight:500;
margin-bottom:-1em;
}
.date-2{
font-size:.76em;
color:rgba(30,30,30,.35);
font-weight:400;
display:block;
text-align:left;
width:92%;
margin:25px auto -14px;
}
.date-3{
font-size:.79em;
color:rgba(30,30,30,.35);
font-weight:500;
margin:10px 0;
display:block;
padding:0;
line-height:1;
}
.readmore-block{
display:block;
text-align:left;
width:92%;
min-height:30px;
position:relative;
margin:10px auto 10px;
}
a.read-more-2{
display: inline-block;
color: #0399B5;
font-size:.82em;
padding:10px 0;
font-weight:600;
transition: all 0.3s ease;
}
a.read-more-2:hover{
color: #000;
}
a.read-more{
display: inline-block;
color: #000;
background:rgba(3, 153, 181,.15);
font-size:.75em;
font-weight:500;
padding:10px 20px;
transition: all 0.3s ease;
}
a.read-more:hover{
color: #fff;
background:#222123;
transition: all 0.3s ease;
}
.text-article p {
font-size: 0.9rem;
color: #333;
line-height: 1.5;
text-align: justify;
}
.first-article-banner {
width: 68%;
margin-left: auto;
overflow: hidden;
}
.first-article-banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/**/
.all-article {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три колонки */
gap: 30px; /* Відстань між блоками */
margin: 20px;
width:83%;
margin:0 auto;
}
.all-article .views-row {
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
position:relative;
}
.all-article .views-field-field-blog-banner{
position:relative;
display:block;
z-index:9;
}
.all-article .views-field-field-blog-banner img {
width: 100%;
height: auto;
object-fit: cover;
z-index:5;
position:relative;
margin-bottom:-4px;
display:inline-block;
transition: all 0.3s ease;
}
.all-article .views-field-field-blog-banner img:hover{
opacity:.7;
transition: all 0.3s ease;
}
.article-priority{
display:inline-block;
font-weight:800;
text-transform:uppercase;
background:#0399B5;
padding:12px 18.5px;
color:#fff;
font-size:.75em;
position:absolute;
top:5%;
left:0;
z-index:10;
}
.all-article .views-field-title{
margin:15px 0;
}
.all-article .views-field-title a {
display: block;
padding: 15px;
font-size:1.05em;
font-weight: bold;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.all-article .views-field-title a:hover {
color: #0073e6;
}
.all-article .views-field-body .field-content {
padding: 0 15px 0px;
font-size: 14px;
color: #666;
line-height: 1.6;
}
.all-article .views-field-body .field-content p {
margin: 0px 0 10px;
font-size:.87em;
line-height:1.35;
}
.all-article .views-field-body .field-content a {
display: inline-block;
padding: 10px 20px;
background-color: #0073e6;
color: white;
text-decoration: none;
border-radius: 4px;
margin-top: 10px;
transition: background-color 0.3s ease;
}
.all-article .views-field-body .field-content a:hover {
background-color: #005bb5;
}
/**/
/****/
.wrapper.blog-page{
position:absolute;
display:block;
width:100%;
max-width:100%;
top:0;
left:0;
/*min-width:690px;
min-width:690px;*/
background:#ededed;
padding:0;
margin:0;
min-height:100%;
font-family: 'UAFSans';
}
.blog-page-head {
width: 95%;
margin: 1em auto 3em;
display: flex;
flex-wrap: wrap;
position:relative;
}
.blog-banner {
width: 50%;
margin-right:0%;
}
.blog-banner img {
width: 100%;
height: auto;
display: block;
}
.blog-page-info {
width: 44%;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
background:#222123;
padding:3%;
}
.blog-page-info h1 {
font-size: 3em;
font-weight: 700;
line-height: 1.2;
font-family: Oswald !important;
padding: 0px;
color: #fff;
}
.body-text {
width: 55%;
margin: 2em auto 0;
position:relative;
padding:3% 4%;
background:#fff;
}
.body-text .image_resized img{
width:100%;
height:auto;
max-width:100%;
}
.body-text img{
height:auto;
max-width:100%;
}
.body-text .node-field {
position: relative;
display: block;
margin-bottom: 25px;
}
.body-text p {
font-size: 1em;
line-height:1.5;
margin:0 0 25px;
}
.body-text a{
color:#0399B5;
font-weight:bold;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.body-text a:hover{
color:#F39200;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.body-text ul {
margin-bottom:2em;
}
.body-text li {
font-size: 1em;
padding:0;
margin:0 0 20px;
}
.body-text h3 {
font-size: 1.45em;
font-weight:900!important;
margin-bottom:1em;
}
.body-text h4 {
font-size: 1.3em;
font-weight:900!important;
margin-bottom:1em;
}
.body-text h5 {
font-size: 1.2em;
font-weight:900!important;
margin-bottom:.5em;
}
.body-text blockquote {
position: relative;
margin: 40px auto;
padding: 30px 40px;
font-size: 20px;
font-weight: bold;
color: #0399B5; /* червоний колір тексту */
text-align: center;
border-top: 1px solid #0399B5;
border-bottom: 1px solid #0399B5;
font-size:.9em;
font-style: italic;
}
.body-text blockquote::before {
content: "❝";
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
font-size: 50px;
line-height:1;
color: #0399B5;
background:#fff;
font-style: normal;
padding: 0 20px;
}
.body-text blockquote p {
display: inline-block;
margin: 0;
line-height: 1.6;
}
/**/
.related-section {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.related-section .views-row {
flex: 1 1 calc(33.333% - 30px);
box-sizing: border-box;
max-width: calc(33.333% - 30px);
}
.related-section img {
width: 100%;
height: auto;
display: block;
}
.related-section .views-row .views-field-title{
display:block;
text-align:left;
margin:10px 0 0;
}
.related-section .views-row .views-field-title span{line-height:1;}
.related-section .views-row a{
font-size:.8em;
line-height:1.1;
color:#222123;
padding:0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.related-section .views-row:hover a{
color:#0399B5;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.related-section .views-row:hover img{
opacity:.82;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
h2.related-blog-title{
position: relative;
display: block;
font-size: 1.25em;
font-weight: 600;
color: #0399B5;
border-bottom: 1.85px solid #0399B5;
padding: 0 0 20px;
margin:3em 0 30px;
}
@media only screen and (max-width: 700px) {
.related-section .views-row {
flex: 1 1 100%;
}
}
/**/
.hello-media{
position:relative;
display:block;
width:100%;
height:100vh;
text-align:center;
overflow:hidden;
z-index:35;
}
.hello-hover {
position: absolute;
display: block;
z-index: 8;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0);
background: linear-gradient(52deg, rgba(0,0,0,1) 14%, rgba(0,0,0,0.20331460220807074) 38%, rgba(0,0,0,0) 100%);
}
.page-title {
position: absolute;
display: block;
z-index: 10!important;
left: 2.6%;
top:auto;
bottom:10.5%;
width: 45%;
color: #fff;
font-family: 'UAFSans';
}
.vertical-block{display:none;}
.top-banner{
position:absolute;
width:100%;
height:100%;
background-size: cover;
background-position: center;
background-repeat:no-repeat;
}
.page-title h1{
font-size:3.55em;
text-transform:uppercase;
line-height:1.2;
padding:0;
margin:0 0 29px;
font-weight:900;
text-align:left;
width:99%;
font-family: 'Oswald'!important;
}
.page-description p {
font-weight: 400;
font-size: .97em;
line-height:1.37;
display: block;
text-align: left;
width:85%;
}
/**/
body{
font-size:17.6px;
position:relative;
display:block;
overflow-x:hidden;
width:100vw;
max-width:100vw;
padding:0;
margin:0;
}
a {text-decoration:none;}
.wrapper{
position:absolute;
display:block;
width:100%;
max-width:100%;
top:0;
left:0;
/*min-width:690px;
min-width:690px;*/
background:#f8f8f8;
padding:0;
margin:0;
min-height:100%;
font-family: 'UAFSans';
}
/**/
.hello-user{
position:relative;
display:inline-block;
width:100%;
max-width:100%;
height:190vh;
overflow:hidden;
background:#000;
margin-bottom:0px;
z-index:9;
overflow-x:hidden;
}
.video-block {
position: fixed;
width: 100vw;
height: 100vh;
display: block;
bottom: 0;
object-fit: cover;
left: 0;
transition: filter 0.3s ease-in-out;
z-index: 1;
}
.video-block .video-poster{
position:absolute;
width:100%;
height:100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
top:0;
left:0;
z-index:-1;
display:block;
}
.video-block video{
position:absolute;
width:auto;
max-width:120%;
min-width:100%;
min-height:100%;
max-height:100%;
height:100%;
top:0;
left:0;
z-index:9;
}
.slogan {
position: absolute;
width:420px;
height:auto;
display:block;
left:2.5%;
top:31vh;
z-index:9;
color:#fff;
text-align:center;
}
.slogan img{
width:100%;
height:auto;
}
.center-logo{
position:absolute;
display:block;
top:10px;
left:3%;
z-index:37;
}
.center-logo img {
width: 50px;
height:50px;
margin-right: 10px;
display: inline-block;
}
.center-logo h1,.center-logo h2 {
color: #fff;
display: inline-block;
font-size: .79em;
font-weight: 500;
text-transform: uppercase;
vertical-align: top;
margin: 7px 0 0;
padding: 0;
line-height: 1.37;
}
.center-logo h2 a{
color:#fff;
font-weight: 500;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.center-logo h2 a:hover{
color:#0399B5;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.vacancie-page .center-logo h2 {
color: #000;
display: inline-block;
font-size: .72em;
font-weight: 500;
text-transform: uppercase;
vertical-align: top;
margin: 8.25px 0 0;
padding: 0;
line-height: 1.16;
}
.bottom-text {
position: absolute;
width:92%;
left:4%;
bottom:20%;
z-index:9;
color:#fff;
text-align:center;
}
.bottom-text p{
font-family: 'Oswald'!important;
font-size:46px;
font-weight:700;
line-height:1.3;
padding:0;
margin:0;
text-transform:uppercase;
}
.videoParent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
margin-bottom: -1px;
}
.videoParent video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.videoParent.hiddenTransform {
opacity: 0;
}
.clear-section{
position:relative;
display:block;
width:100%;
height:2500px;
background: lightgrey;
}
.inner{
position:relative;
display:block;
width:100%;
height:.001px;
margin:-10px 0 0;
background:transparent;
}
.inner-2{
position:relative;
display:block;
width:100%;
height:750px;
background:#e1e8eb;
}
.center{
position: relative;
width: 100%;
height:100vh;
display: block;
overflow:hidden;
background:#1c1c1c;
border:0px solid red;
z-index:999;
}
/**/
.block-title{
position:relative;
display:block;
text-align:left;
margin-bottom:1em;
}
.block-title span{
display:block;
}
.block-title span.big{
font-size:4.05em;
font-family: 'Oswald';
font-weight:bold;
padding:5px 15px 20px;
margin-bottom:.7em;
color:#f8f8f8;
line-height:1.25;
display:inline-block;
position:relative;
transform: rotate(-3deg);
}
.block-title span.big.animated:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#0399B5;
display:block;
z-index:-1;
animation:helloIn 1s cubic-bezier(0.25, 0.46, 0.45, 1.34) forwards;
}
/* Опис анімації для плавного з'явлення зліва */
@keyframes helloIn {
0% {
width:0%;
}
100% {
width:100%;
}
}
/**/
.brigades-front{
position:relative;
display:inline-block;
width:100%;
}
.brigades-front div{
box-sizing: border-box!important;
}
.sticky-block-container{
width: 100%;
}
.sticky-block-row{ width: 100%;}
.column-left{
float: right;
width: 50%;
padding:0 0px;
box-sizing: border-box;
}
.content-block-left{
padding: 10px;
color: #000000;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#sticky-block-3 .content-block-left{
background-image: url('/themes/uanavy/images/38.jpg')
}
.brigade-chevrons{
float: left;
width: 50%;
padding: 10px 2%;
/*background:#0399B5;*/
background:#f8f8f8;
vertical-align:middle;
}
.content-block-right{
margin-bottom:21px;
padding:20px 4%;
margin-left:.7%;
width:100%;
display:block;
background:#fff;
text-align:left;
border:2.5px solid transparent;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
h3.stick-title{
margin:20px 0 1em;
padding:20px 0 0;
font-family: 'Oswald'!important;
font-size: 50px;
font-weight: 700;
line-height: 1.3;
}
.content-block-right:hover{
border:2.5px solid #0399B5;
box-shadow:0 0 3.5px rgba(0,0,0,.45);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.content-block-right a{
display:block;
font-size:1.15em;
font-weight:bold;
color:#000;
text-align:left;
}
.content-block-right.no-priority a{
display:block;
font-size:1.05em;
font-weight:bold;
color:#000;
text-align:left;
}
.content-block-right.priority img{
height:165px;
width:auto;
margin:0 0 15px;
display:block;
}
.content-block-right.no-priority img{
height:100px;
width:auto;
margin:0 0 15px;
display:block;
}
.content-block-right.priority p{
font-size:.85em;
font-weight:400;
line-height:1.4;
font-family: 'UAFSans';
}
.content-block-right.no-priority p{
font-size:.79em;
font-weight:400;
line-height:1.4;
font-family: 'UAFSans';
}
.sticky{
display: block;
position: -webkit-sticky;
position: sticky;
will-change: transform;
height:100vh;
top: 0px;
}
.view-block{
position:relative;
display:block;
text-align:right;
width:100%;
}
.view-block a.brigade-view{
display:inline-block;
padding:13px 35px;
font-size:.77em;
border-radius:30px;
background:#ebebeb;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.view-block a.brigade-view:hover{
color:#fff;
background:#000;
box-shadow:0 0 5.5px rgba(0,0,0,.55);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
/**/
#go-scroll{
position:relative;
display:block;
margin:0;
height:1px;
}
/**/
.circle {
width: 111px;
height: 111px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 17px;
color: #000;
font-weight: bold;
position:absolute;
overflow:visible;
top:39%;
box-sizing: border-box;
right:5%;
z-index:999;
}
.circle:before {
box-sizing: border-box;
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
z-index: -1;
-webkit-transition: all .28s;
-moz-transition: all .28s;
-o-transition: all .28s;
-ms-transition: all .28s;
transition: all .28s;
}
.circle p {
margin: 0;
display:block;
padding:0;
line-height:1.1;
}
.circle:after {
content: '';
position: absolute;
top: -29%;
left: -30%;
width: 160%;
height: 160%;
transform-origin: center;
background-image: url('./images/animation-1.png');
background-size: cover;
background-repeat:no-repeat;
animation: spin 25s linear infinite;
z-index: -2;
box-sizing: border-box;
}
.circle:hover:before {
background: rgba(0,0,0, 0.35);
-webkit-transition: all .28s;
-moz-transition: all .28s;
-o-transition: all .28s;
-ms-transition: all .28s;
transition: all .28s;
}
.circle:hover{
color:rgb(243, 146, 0);
-webkit-transition: all .28s;
-moz-transition: all .28s;
-o-transition: all .28s;
-ms-transition: all .28s;
transition: all .28s;
}
.circle:hover:after {
animation-play-state: paused;
background-image: url('./images/animation-2.png');
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/**/
nav.website-menu,
.navbar-toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav.website-menu{
position: fixed;
z-index: 990;
width: 100%;
height: 100%;
text-align: center;
display: table;
background-color:rgba(0,0,0,.23);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
background-image: url('./images/m-5.webp');
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
top:0;
left:0;
}
.navbar-toggle:hover{
background-color:rgba(0,0,0,.53);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
.nav-hide { display: none!important; }
nav.website-menu ul {
display: table-cell;
vertical-align: middle;
padding-left: 0 !important;
}
nav.website-menu ul li { list-style: none; }
nav.website-menu ul li a {
font-size: 35pt;
padding:15px 0;
color: inherit;
font-weight: bolder;
text-decoration: none;
margin:0;
padding:0;
line-height:60pt;
}
.navbar-toggle {
position: fixed;
top: 5%; /* Центрує елемент по вертикалі */
left: 50.5%; /* Центрує елемент по горизонталі */
width: 28px;
height: 28px;
background-color: #0399B5;
background-image: url('./images/menu-icon.png');
background-size: 60% 60%;
background-position: center center;
background-repeat: no-repeat;
padding: 10px;
border-radius: 50%;
z-index: 991;
cursor: pointer;
-webkit-transition: all .28s;
-moz-transition: all .28s;
-o-transition: all .28s;
-ms-transition: all .28s;
transition: all .28s;
transform: scale(1); /* Початковий розмір */
/* Центрування елемента з допомогою transform */
transform: translate(-50%, -50%) scale(1); /* translate(-50%, -50%) переносить елемент на його половину */
}
.navbar-toggle.navbar-on {
background-image: url('./images/close-icon.png'); /* Зміна фону */
animation: scaleIn 0.28s forwards; /* Обидві анімації */
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
.navbar-toggle.navbar-on:hover{
background-color: #000;
animation: rotateIn 0.28s forwards; /* Анімація для збільшення кнопки */
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
/* Анімація для масштабування */
@keyframes scaleIn {
0% {
transform: translate(-50%, -50%) scale(0); /* Початковий розмір 0 */
}
100% {
transform: translate(-50%, -50%) scale(1); /* Кінець анімації з розміром 1 */
}
}
/* Анімація для обертання */
@keyframes rotateIn {
0% {
transform: translate(-50%, -50%) rotate(0deg); /* Початкове обертання */
}
100% {
transform: translate(-50%, -50%) rotate(360deg); /* Кінцеве обертання */
}
}
.navi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
margin: 0;
padding: 0;
z-index: 100;
}
nav.website-menu .navi li a {
font-size: 3em;
color: #fff;
position: relative;
font-family: 'Oswald';
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
nav.website-menu .navi li a:hover{
color: #F39200;
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
/*
.navi li a:before {
position: absolute;
color: yellow;
top: 0;
left: 0;
width: 0;
overflow: hidden;
content: attr(data-text);
transition: 0.6s;
}
.navi li a:hover:before {
width: 100%;
}*/
.photo {
background-color:transparent;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background:#000;
background-image: url('./images/m-5.webp');
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
transition: 0.5s;
}
/**/
.vacancies-front{
position:relative;
display:block;
margin:4.5em 0 0;
z-index:7;
}
.vacancies-front .hot{
position:relative;
display:block;
margin:0em auto 0;
width:95%;
}
.vacancies-front h2{
font-family: 'Oswald'!important;
font-size:46px;
font-weight:700;
line-height:1.3;
padding:0;
margin:0 0 2.4em;
display:block;
text-align:center;
}
.vacancies-front .slick-slide {
margin:0 15px;
}
.row-banner{
position:relative;
display:block;
border:4px solid transparent;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.row-banner a{
position:absolute;
display:block;
width:100%;
height:100%;
z-index:9;
}
.vacancies-front .slick-slide:hover .row-banner{
border:4px solid #0399B5;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.vacancies-front .slick-slide img{
width:100%;
height:auto;
position:relative;
display:block;
z-index:7;
}
.vacancies-front .row-title{
position:relative;
display:block;
text-align:left;
margin:15px 0;
}
.vacancies-front .row-title a{
font-weight:bold;
font-size:1em;
color:#000;
font-family: 'UAFSans';
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.vacancies-front .slick-slide:hover .row-title a{
color:#0399B5;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.vacancies-front .bottom-button{
position:relative;
display:block;
margin:3em auto 4.5em;
width:93%;
text-align:right;
}
.vacancies-front .bottom-button a{
padding: 14px 100px 13px;
display:inline-block;
border: 2.4px solid #0399B5;
background: transparent;
color: #000;
border-radius:35px;
font-size: .85em;
letter-spacing: .05px;
display: inline-block;
box-shadow:0 0 3.5px rgba(0,0,0,.15);
font-weight: 600;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.vacancies-front .bottom-button a:hover{
background: #0399B5;
color: #fff;
box-shadow:0 0 4.5px rgba(0,0,0,.25);
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
/**/
.center-block{
position:relative;
display:block;
margin:6em 0 5em;
text-align:center;
overflow:hidden;
max-width:100vw;
}
.center-block span{
font-family: 'Oswald' !important;
font-size: 47px;
font-weight: 700;
line-height: 1.3;
padding: 0;
position:relative;
display:block;
width:85%;
overflow:hidden;
margin:0 auto;
text-transform: uppercase;
}
.center-block span strong{
color:#0399B5;
}
.center-block a{
color:#fff;
position:relative;
display:inline-block;
z-index:9;
font-size:.89em;
letter-spacing:.15px;
text-transform:uppercase;
font-weight:700;
margin:4em 0 1em;
padding:20.5px 94px 20.5px;
cursor:pointer;
text-align:center;
border-radius:35px;
opacity:1;
border:none;
box-shadow:0 0 4px rgba(0,0,0,.45);
background: linear-gradient(-45deg, #2ebed9, #2ebed9, #0399B5, #129eb8);
overflow:hidden;
animation: gradient 4s ease infinite;
background-size: 200% 200%;
}
.center-block a:hover{
background:#000;
color:#fff;
box-shadow:2px 2px 5px #ccc;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/**/
.one-year{
position:relative;
display:none;
width:100%;
max-width:100%;
overflow:hidden;
height:700px;
overflow:hidden;
margin:4em 0 0em;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url('/themes/uanavy/images/18-24.jpg')
}
.one-year.check{
display:block!important;
z-index:999;
}
.one-year .one-hover{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
z-index:5;
opacity:.5;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.9159313383556548) 4%, rgba(0,0,0,0) 62%);
}
.one-info{
position:absolute;
bottom:4%;
left:5%;
width:90%;
z-index:99;
text-align:center;
}
.one-info h2{
font-family: 'Oswald' !important;
font-size: 70px;
font-weight: 700;
line-height: 1.3;
padding: 0;
margin:0 0 15px;
position: relative;
display: block;
color:#fff;
text-transform: uppercase;
}
.one-info p{
color:#fff;
width:75%;
display:block;
margin:0 auto;
font-size: 1.05em;
font-weight: 400;
line-height: 1.4;
font-family: 'UAFSans';
}
.yellow-btn{
position:relative;
display:inline-block;
margin: 4em 0 1em;
padding: 20.5px 94px 20.5px;
background: #F39200;
color: #fff;
z-index: 12;
font-size: .89em;
font-weight: 600;
letter-spacing: .15px;
line-height:1;
border-radius: 35px;
cursor:pointer;
text-transform: uppercase;
box-shadow:0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-webkit-animation: pulse 2.25s infinite;
}
.yellow-btn:hover {
-webkit-animation: none;
background:#0399B5;
color:#1c1c1c;
box-shadow:0 0 4px rgba(0,0,0,.45);
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
@-webkit-keyframes pulse {
0% {
transform: scale(0.945);
}
65% {
transform: scale(1);
box-shadow: 0 0 0 12px rgba(255, 208, 94,.195);
}
72% {
box-shadow: 0 0 0 32px rgba(255, 208, 94,.045);
}
88% {
box-shadow: 0 0 0 32px rgba(255, 208, 94,.015);
}
100% {
transform: scale(0.945);
box-shadow: 0 0 0 0 rgba(255, 208, 94,0);
}
}
/**/
.main-form{
position:relative;
display:block;
margin:3em 0 0em;
padding-left:.5%;
overflow:hidden;
}
.main-form .webform-title {
display: flex;
flex-direction: column;
align-items: center;
}
.main-form .webform-title {
display: flex;
flex-direction: column;
align-items: center;
}
.main-form .webform-title span {
display: block;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-size: 8.5em;
font-family: 'Oswald';
line-height: 1;
opacity: 1; /* Елементи завжди видимі */
transition: transform 0.3s ease; /* Плавний рух */
}
.main-form .webform-title span.big-top {
color: #1c1c1c;
margin: 0.15em 0 0em;
text-align: right;
transform: translateX(20%); /* Початкове положення праворуч */
}
.main-form .webform-title span.big-bottom {
color: #F39200;
margin: 0.15em 0 .5em;
text-align: left;
transform: translateX(-20%); /* Початкове положення ліворуч */
}
.main-form .main-form-block{
position:relative;
display:block;
margin:0 auto 3em;
width:60%;
padding:4.25% 7%;
background:#fff;
/*border-radius:6px;*/
border: 2.5px solid #0399B5;
z-index:9;
box-shadow:0 0 12.5px rgba(0,0,0,.13);
}
.main-form .main-form-block:hover{
/*box-shadow:0 0 22.5px rgba(3, 153, 181,.55);*/
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
.form-description p{
font-size:.93em;
line-height:1.45;
padding-bottom:25px;
margin-bottom:45px;
border-bottom:2px solid rgba(0,0,0,.25);
}
.main-form form.webform-submission-form .js-form-item{
width:47%;
display:inline-block;
margin:0 0 2.5%;
}
.main-form form.webform-submission-form .js-form-item:nth-child(even){
width:47%;
display:inline-block;
margin:0 4% 2.5% 0;
}
.main-form ::-webkit-input-placeholder{
color:#0399B5;
font-size:.95em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.main-form ::-moz-placeholder{
color:#0399B5;
font-size:.95em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.main-form :-moz-placeholder {
color:#0399B5;
font-size:.95em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.main-form :-ms-input-placeholder {
color:#0399B5;
font-size:.95em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.main-form :focus::-webkit-input-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.main-form :focus::-moz-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.main-form :focus:-moz-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.main-form :focus:-ms-input-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.main-form form.webform-submission-form .js-form-item input[type="number"],
.main-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 13.5px 13px 14.5px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size:.95em;
color:#0399B5;
letter-spacing:.3px;
font-family: 'UAFSans'!important;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item{
width: 100%;
display: block;
margin: 25px auto 2.5%!important;
margin-right: 0px;
text-align:left;
padding:2% 0;
border:none;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .form-radio {
display: none; /* Ховаємо стандартне радіо */
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option {
display: flex;
align-items: center;
justify-content: center;
width: 40px; /* Розмір кнопки */
height: 40px;
padding:4px;
font-size:.8em;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
color: #0399B5;
transition: all 0.3s ease;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .form-radio:checked + .option {
background-color: #F39200;
border-color: #F39200;
color: white;
position: relative;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .fieldset-wrapper .js-form-item{
width:auto;
display:inline-block;
margin:-0px 14px 0 0!important;
text-align:left;
padding:0%;
color:#000;
background:transparent;
cursor:pointer;
}
.main-form form.webform-submission-form .js-form-item.js-form-type-textarea{
width: 98%;
display: inline-block;
margin: 0% 0 15px!important;
}
.main-form form.webform-submission-form .js-form-item textarea{
border: 2.2px solid #2c2c2c;
padding: 13.5px 20px 14.5px;
width: 94.5%;
max-width: 94.5%;
min-width: 94.5%;
height: 170px;
min-height: 170px;
max-height: 222px;
font-size:.95em;
color:#000;
font-family: 'UAFSans'!important;
background: rgba(255,255,255,.19);
margin-top: 2px;
}
.main-form form.webform-submission-form .js-form-item.js-form-type-webform-markup{
width:100%;
display:block;
margin: 0 0 .5%;
}
.main-form form.webform-submission-form input.webform-button--submit{
width: 98%;
color: #fff;
position: relative;
display: block;
z-index: 9;
font-size: .89em;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 700;
margin: 1em 0 0em;
padding: 20.5px 0px 20.5px;
cursor: pointer;
text-align: center;
border-radius: 35px;
opacity: 1;
border: none;
box-shadow: 0 0 4px rgba(0, 0, 0, .45);
background: linear-gradient(-45deg, #2ebed9, #2ebed9, #0399B5, #129eb8);
overflow: hidden;
animation: gradient 4s ease infinite;
background-size: 200% 200%;
}
.main-form form.webform-submission-form input.webform-button--submit:hover{
z-index:99;
color:#FFF;
background:#232323;
-webkit-transition: all .58s;
-moz-transition: all .58s;
-o-transition: all .58s;
-ms-transition: all .58s;
transition: all .58s;
}
/***/
.main-faq{
position:relative;
display:block;
width:85%;
margin:2.5em auto 0em;
padding-left:.5%;
overflow:hidden;
}
.main-faq h3{
display: block;
padding: 0;
margin:0;
line-height:1.5;
font-weight: bold;
text-transform: uppercase;
font-size: 3.5em;
font-family: 'Oswald';
text-align:center;
overflow:hidden;
}
.faq-sec{
position:relative;
display:block;
width:87%;
margin:4em auto 0em;
}
.faq-sec .views-row {
margin-bottom: 18px;
}
.faq-title{
border: 1.85px solid #040404;
padding: 20px 35px;
font-size: 18px;
background:#fff;
font-weight: 500;
line-height: 25px;
letter-spacing: 0em;
text-align: left;
background-image: url(./images/plus_icon.png);
background-repeat: no-repeat;
background-position: 98% 50%;
background-size: 31px 31px;
cursor: pointer;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.faq-title:hover{
color:#F39200;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.faq-title.active{
background-image: url(./images/minus_icon.png);
border: 1.85px solid #F39200;
background-color:rgba(232, 160, 51,.083);
background-size: 31px 31px;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.faq-title.active:hover{
color:#1c1c1c;
opacity:.89;
}
.faq-content {
display: none;
margin:10px 0;
padding:4%;
background:rgba(255, 255, 255,1);
}
.faq-content p {
margin: 0;
padding: 0;
font-size:.95em;
line-height:1.45;
}
.faq-content li{
margin-bottom:7px;
font-size:.95em;
}
.below-faq-text {
text-align: center;
position:relative;
display:block;
width:92%;
margin:6em 0 4em;
font-family: Montserrat;
font-size: 18px;
font-weight: 500;
line-height: 30px;
letter-spacing: 0em;
}
.promo-sec {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
margin: 8em auto 0em;
opacity: 0;
z-index:10;
width:94%;
transition: opacity 0.5s ease-out;
}
/* Блок відео */
.promo-sec video {
width: 21%; /* Трохи більше для кращого накладання */
height: auto;
margin: 0 -3%; /* Зменшуємо відступи для накладання */
border-radius: 25px;
display: inline-block;
opacity: 0;
transform: translateY(100px);
border:9px solid #f8f8f8;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* Непарні відео (1, 3, 5) - нахил вліво */
.promo-sec video:nth-child(odd) {
transform: translateY(100px) rotate(-5deg);
}
/* Парні відео (2, 4) - нахил вправо */
.promo-sec video:nth-child(even) {
transform: translateY(100px) rotate(5deg);
}
/* Зміщення відео вниз */
.promo-sec video:nth-child(1) { margin-top: 0px; }
.promo-sec video:nth-child(2) { margin-top: 20px; }
.promo-sec video:nth-child(3) { margin-top: 0px; }
.promo-sec video:nth-child(4) { margin-top: 30px; }
.promo-sec video:nth-child(5) { margin-top: 10px; }
/* Коли відео з'являється */
.promo-sec.show {
opacity: 1;
}
.promo-sec video.show {
opacity: 1;
transform: translateY(0) rotate(-5deg);
}
/* Парні відео залишають нахил вправо */
.promo-sec video:nth-child(even).show {
transform: translateY(0) rotate(5deg);
}
/**/
/* Сторінка Бригади */
.hello-brigade{
position:relative;
display:block;
margin:0;
padding:0;
height:83.5vh;
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
}
.brigade-page-hover{
position: absolute;
display: block;
z-index: 8;
bottom: 0;
left: 0;
opacity:.55;
width: 100%;
height: 100%;
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8374999658066351) 10%, rgba(34, 33, 35, 0) 100%);
}
.hello-chevrons{
position:absolute;
top: 50%; /* Встановлюємо елемент в центр по вертикалі */
z-index:9;
display:block;
transform: translate(0, -50%); /* Компенсуємо 50% ширини та висоти елемента для точного центрування */
right:5%;
border:0px solid green;
}
.perspective-body{
display:grid;
place-items:center;
}
.container-perspective{
perspective: 700px;
transform-style: preserve-3d;
display:grid;
place-items:center;
}
.hello-chevrons img{
height:320px;
width:auto;
display:inline-block;
}
.brigade-name{
position: absolute;
left: 5%;
top: 50%; /* Встановлюємо елемент в центр по вертикалі */
width: 65%;
transform: translate(-2.5%, -50%); /* Компенсуємо 50% ширини та висоти елемента для точного центрування */
z-index: 9;
}
.brigade-name h1{
position:relative;
font-size: 50px;
font-weight: 700;
line-height: 1.3;
color:#fff;
text-transform:uppercase;
font-family: Oswald !important;
padding: 0px;
margin: 0px 0 15px;
}
.sub-block{
position:relative;
display:block;
margin:25px 0 0;
}
.corp-row {
display: inline-flex;
align-items: center;
gap: 15px;
text-decoration: none;
padding:0px;
}
.corp-row:hover img{
transform: scale(0.9);
-webkit-transform: scale(0.9);
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.corp-icon img {
display: block;
max-width: 50px;
height: auto;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.corp-title {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 13.5px;
font-weight:500;
line-height:1.2;
text-transform:capitalize;
color: #fff;
width:90px;
margin-left:-4px;
text-align:left;
border:0px solid red;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.corp-row:hover .corp-title{
color:#F39200;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.brigade-vacancies {
position: relative;
padding: 17px 60px 17px;
display: inline-block;
border: 2.4px solid #0399B5;
background: transparent;
color: #fff;
border-radius: 35px;
font-size: .85em;
margin-right:2em;
line-height:1;
letter-spacing: .05px;
overflow: hidden;
box-shadow: 0 0 3.5px rgba(0, 0, 0, .15);
font-weight: 600;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: color 0.65s ease-in-out, border-color 0.65s ease-in-out;
}
.brigade-vacancies::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #0399B5;
transform: translate(-50%, -50%) rotate(45deg);
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
z-index: -1;
}
.brigade-vacancies:hover {
color: white;
border-color: #0399B5;
}
.brigade-vacancies:hover:before {
width: 600%;
height: 600%;
}
/****/
.sticky-button {
position: fixed;
z-index: 999;
bottom: 5%;
left: 50%;
transform: translate(-50%, 100%); /* Спочатку кнопка знаходиться за межами екрану */
padding: 23px 120px 23px;
display: inline-block;
background: rgba(3, 153, 181, .82);
color: #fff;
border-radius: 35px;
font-size: 1.05em;
line-height: 1;
letter-spacing: .05px;
overflow: hidden;
margin: 0!important;
box-shadow: 0 0 5.5px rgba(0, 0, 0, .55);
font-weight: 900;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: transform 0.65s ease-in-out, opacity 0.65s ease-in-out; /* Анімація зміщення і прозорості */
opacity: 0; /* Початково кнопка невидима */
}
.sticky-button.show {
transform: translate(-50%, 0); /* Кнопка виїжджає на своє місце */
opacity: 1; /* Кнопка стає видимою */
}
.sticky-button:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background:#222123;
transform: translate(-50%, -50%) rotate(45deg);
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
z-index: -1;
}
.sticky-button:hover {
color: white;
border-color: #0399B5;
}
.sticky-button:hover:before {
width: 600%;
height: 600%;
}
/*****/
.brigade-social{
position:relative;
display:block;
text-align:center;
margin:20px 0 0;
padding-left:2%;
border:0px solid red;
}
.brigade-social a{
display:inline-block;
border:.5px solid #fff;
width:40px;
height:40px;
padding:5px;
border-radius:50%;
background-color:transparent;
background-size:71% 71%;
background-position:center center;
background-repeat:no-repeat;
opacity:.83;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.brigade-social a:hover{
background-color: rgba(9, 155, 183, 0.45);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
opacity:1;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.brigade-social a.fb{
background-image: url('./images/fb.png');
margin-right:25px;
}
.brigade-social a.instagram{
background-image: url('./images/instagram.png');
}
/***/
.motto {
overflow: hidden;
width: 100%;
}
.motto .lines {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background:#0399B5;
padding:1.1em 0;
}
.motto .lines.reverse{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background:#222123;
padding:1.1em 0;
}
.motto .line {
animation: marquee 125s linear infinite;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
white-space: nowrap;
}
/* .line:nth-child(2) {
color: red;
} */
.motto .line span {
padding-right: 2.5em;
color:#fff;
font-size:17px;
}
.motto .line span:after {
content: '○';
margin-left: 2.5em;
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.reverse .line {
animation-direction: reverse;
animation-duration: 310s;
}
/**/
.brigade-overview{
position:relative;
padding:6% 6.5%;
text-align:left;
display:block;
background:#F8F8F8;
}
.brigade-overview p{
font-size:17px;
line-height:28px;
margin-bottom:20px;
}
/**/
#video-grid {
display: flex;
flex-direction: column;
gap: 10px;
width:97%;
overflow:hidden;
margin-left:1%;
}
.vertical-video, .horizontal-video {
display: flex;
gap: 10px;
width: 100%;
}
.vertical-video video {
flex: 1;
height: auto;
max-width: calc(100% / 4);
}
.horizontal-video video {
flex: 1;
height: auto;
max-width: calc(100% / 3);
}
video {
object-fit: cover;
width: 100%;
height: 100%;
max-height:490px;
}
/**/
/* Правки 39 Бригади - Блок Комбриг */
.brigade-co {
width: 100%;
margin: 5em auto 2em;
padding: 0px;
border-radius: 8px;
}
.brigade-co-row-info{
background-color: rgba(30,30,30,.045);
padding:45px;
}
.brigade-co-row {
display: flex;
align-items: center; /* Вертикальне вирівнювання тексту по центру */
gap: 6%; /* Відступ між фото і текстом */
}
.brigade-co-row img {
width: 32.5%;
height: auto;
object-fit: cover;
}
.brigade-co-row > div {
flex: 1; /* Решта простору займає текст */
}
.co-position {
position: relative;
display: block;
text-align: left;
color: #0399B5;
font-family: 'Oswald';
font-size: 1.15em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .15px;
margin: 2px 0 9px;
}
.co-call-sign {
position: relative;
display: block;
text-align: left;
color: #222123;
font-family: 'Oswald';
font-size: 1.6em;
font-weight: 800;
}
.brigade-co-row p {
font-size: .9em;
line-height: 1.55;
color: #222123;
margin-bottom:6px;
}
/**/
.commander{
position:relative;
display:none;
width:88%;
margin:8em auto 0;
}
.commander.check-block{
display:block;
}
.vacancie-page .commander{
position:relative;
display:block;
width:79%;
margin:4em auto 0;
}
.commander h3{
font-size: 110px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color:#0399B5;
margin:0px 0 .15em;
}
.commander h2{
font-size: 32px;
font-weight: bold!important;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color:#222123;
margin:0px 0 .35em;
}
.commander .commander-baner{
position:relative;
display:inline-block;
width:30%;
}
.commander .commander-baner img{
width:100%;
height:auto;
}
.commander .commander-info{
position:relative;
display:inline-block;
width:55%;
vertical-align:top;
margin-left:5%;
}
.commander .commander-info span{
display:block;
font-family: 'Oswald' !important;
font-size: 41px;
font-weight: 700;
line-height: 1.3;
padding: 0;
margin: 0 0 .4em;
display: block;
text-align:left;
}
/**/
.commanders-row-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: 100%;
margin:70px 0 0;
}
.commanders-row {
display: flex;
flex-direction: column;
align-items: left;
text-align: left;
}
.command-position{
position:relative;
display:block;
text-align:left;
color:#0399B5;
font-family: 'Oswald';
font-size:1.05em;
text-transform:uppercase;
font-weight:600;
letter-spacing:.15px;
margin:17px 0 5px;
}
.call-sign{
position:relative;
display:block;
text-align:left;
color:#222123;
font-family: 'Oswald';
font-size:1.45em;
font-weight:800;
}
.commanders-row p{
font-size:.8em;
line-height:1.45;
color:#222123;
}
.commanders-row img {
width: 100%;
height: auto;
box-shadow:0 0 4px #666;
}
@media (max-width: 1024px) {
.commanders-row-container {
grid-template-columns: repeat(2, 1fr); /* 2 в ряд для планшетів */
}
}
@media (max-width: 600px) {
.commanders-row-container {
grid-template-columns: repeat(1, 1fr); /* 1 в ряд для мобільних */
}
}
.baner-field{
position:relative;
}
.play{
display:inline-block;
border:.5px solid #fff;
position:absolute;
bottom:18px;
left:11px;
width:50px;
height:50px;
padding:5px;
border-radius:50%;
background-color:rgba(255,255,255,.17);
background-image: url('./images/play-me.png');
background-size:31% 31%;
background-position:52.3% 51%;
background-repeat:no-repeat;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.play:hover{
background-color: rgba(3, 153, 181, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.play span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(130%, -50%);
color: transparent;
font-size: 7px;
text-align: center;
white-space: nowrap;
overflow:hidden;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.play:hover span{
font-size:15px;
opacity:1;
color:#fff;
transform: translate(30%, -50%);
-webkit-transition: all .44s ease;
-moz-transition: all .44s ease;
-ms-transition: all .44s ease;
-o-transition: all .44s ease;
transition: all .44s ease;
}
/**/
.unit-vacancies{
position:relative;
display:none;
overflow:hidden;
width:88%;
margin:8em auto 0;
}
.unit-vacancies.check{
display:block;
}
.main-form .webform-title {
display: flex;
flex-direction: column;
align-items: center;
}
.scrolling-header {
display: flex;
flex-direction: column;
align-items: center;
}
.scrolling-header span {
display: block;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-size: 7.25em;
font-family: 'Oswald';
line-height: 1.1;
opacity: 1; /* Елементи завжди видимі */
transition: transform 0.3s ease; /* Плавний рух */
}
.scrolling-header span.right-scroll {
color: #1c1c1c;
margin: 0.15em 0 0em;
text-align: right;
transform: translateX(20%); /* Початкове положення праворуч */
}
.scrolling-header span.left-scroll {
color: #F39200;
margin: 0.15em 0 .5em;
text-align: left;
transform: translateX(-20%); /* Початкове положення ліворуч */
}
.unit-vacancies-block .vacancie-row{
position:relative;
display:inline-block;
margin:0 0 2.5%;
padding: 1.5%;
border: 2.5px solid #0399B5;
width:45%;
vertical-align:top;
}
.unit-vacancies-block .vacancie-row:nth-child(odd){
margin:0 2.5% 2.5% 0;
}
.unit-vacancies-block .vacancie-row-inner{
text-align:left;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 0 12.5px rgba(0, 0, 0, .07);
color:#000;
padding:8% 4%;
display:table;
width:91%;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.unit-vacancies-block .vacancie-row:hover .vacancie-row-inner{
box-shadow: 0 0 12.5px rgba(0, 0, 0, .33);
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.unit-vacancies-block .vacancie-row span{
font-size:1.08em;
font-weight:500;
display:table-cell;
width:100%;
vertical-align:middle;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.unit-vacancies-block .vacancie-row:hover .vacancie-row-inner span{
color:#0399B5;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.unit-vacancies-block .vacancie-row:last-child{
margin:0 0 0em;
}
.unit-vacancies-block .vacancie-row .go-v{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
left:0;
background:transparent;
}
.unit-vacancies-block .vacancie-row .bottom-go{
position:absolute;
bottom:23px;
right:28px;
width:40px;
height:40px;
display:block;
background-image: url("./images/btn-arrow-vacancie.png");
background-size:16px 16px;
background-repeat: no-repeat;
background-position:center center;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.unit-vacancies-block .vacancie-row:hover .bottom-go{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
/*****************/
.positions-facets{
position:relative;
display:block;
width:80%;
margin:3em auto;
}
.unit-vacancies-block .block-facets-ajax {
box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 12.5px;
padding: 3%;
background: rgb(255, 255, 255);
margin: 0px 0px 3em;
}
.unit-vacancies-block .facets-widget-checkbox h3 {
position: relative;
display: block;
width:97%;
font-size: 1.48em;
font-weight: 600;
color: #1c1c1c;
border-bottom: 1.85px solid #0399B5;
padding: 0 0% 20px;
margin: 15px 0 30px 1.4%;
}
.unit-vacancies-block .facets-widget-checkbox .block-facets-ajax{
padding:3%;
background:#fff;
box-shadow: 0 0 12.5px rgba(0, 0, 0, .07);
margin:0 0 3em;
}
.unit-vacancies-block .facets-widget-checkbox ul{
position:relative;
display:block;
padding:0;
margin:0;
}
.unit-vacancies-block .facets-widget-checkbox ul li{
position:relative;
display:inline-block;
padding:1.5%;
margin:0 10px 20px;
background: #F8F8F8;
}
/**/
.positions-facets .facets-checkbox {
position: absolute;
opacity: 0;
}
/* Контейнер перемикача — label */
.positions-facets .facets-checkbox + label {
position: relative;
display: inline-flex;
align-items: center;
padding-left: 62px;
min-height: 28px;
cursor: pointer;
font-size:.85em;
}
/* Стиль самого перемикача */
.positions-facets .facets-checkbox + label::before {
content: '';
position: absolute;
left: 0;
width: 50px;
height: 28px;
background-color: #ccc;
border-radius: 999px;
transition: background-color 0.3s;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Круг */
.positions-facets .facets-checkbox + label::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
z-index: 2;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Хрестик — ліворуч */
.positions-facets .facets-checkbox + label span::before {
content: '';
position: absolute;
left: 8px;
top: 5px;
font-size: 14px;
color: rgba(0, 0, 0, 0.3);
transition: opacity 0.3s;
z-index: 1;
}
/* Галочка — праворуч */
.positions-facets .facets-checkbox + label span::after {
content: '';
position: absolute;
right: 8px;
top: 5px;
font-size: 14px;
color: white;
opacity: 0;
transition: opacity 0.3s;
z-index: 1;
}
/* Коли ввімкнено */
.positions-facets .facets-checkbox:checked + label::before {
background-color: #2196F3;
}
.positions-facets .facets-checkbox:checked + label::after {
transform: translateX(22px);
}
.positions-facets .facets-checkbox:checked + label span::before {
opacity: 0;
}
.positions-facets .facets-checkbox:checked + label span::after {
opacity: 1;
}
/**/
.unit-weaponry{
position: relative;
display: block;
width: 88%;
margin: 8em auto 0;
}
.unit-weaponry h3 {
font-size: 90px;
font-weight: 700;
line-height: 1.2;
font-family: Oswald !important;
padding: 0px;
color: #0399B5;
margin: 0px 0 35px;
padding-bottom:20px;
text-transform:uppercase;
}
.unit-weaponry p {
font-size: 17px;
line-height: 28px;
margin-bottom: 20px;
}
/**/
.unit-traditions{
position: relative;
display: block;
width: 88%;
margin: 8em auto 0;
}
.unit-traditions h3 {
font-size: 90px;
font-weight: 700;
line-height: 1.2;
font-family: Oswald !important;
padding: 0px;
color: #0399B5;
margin: 0px 0 35px;
padding-bottom:20px;
text-transform:uppercase;
}
.unit-traditions p {
font-size: 17px;
line-height: 28px;
margin-bottom: 20px;
}
/**/
.unit-gallery{
position:relative;
display:block;
margin:5em 0 0 5em;
width:88%;
border:0px solid red;
}
.unit-gallery img{
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.unit-gallery .justified-gallery img:hover{
opacity:.75;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
/**/
.brigade-application-form{
position:relative;
display:block;
overflow:hidden;
width:90%;
margin:9em auto 0;
}
.join-us{
position:relative;
display:inline-block;
width:38%;
vertical-align:top;
margin-right:5.5%;
text-align:left;
}
.join-us h4{
font-size: 3.7em;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #222123;
margin: 0px 0 50px;
}
.join-us p{
font-size: .95em;
line-height: 1.4;
margin-bottom:18px;
color: #000;
}
.application-form{
position:relative;
display:inline-block;
width:49%;
vertical-align:top;
text-align:left;
padding:2.5%;
background:rgba(255,255,255,.67);
border: 2.5px solid #0399B5;
z-index: 9;
box-shadow: 0 0 12.5px rgba(0, 0, 0, .13);
}
.application-chevrons{
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-56%, -50%);
opacity: 0.065;
width: 100%;
text-align: center;
}
.application-chevrons img{
display:inline-block;
animation: grayscale-animation 9s infinite alternate;
min-height:450px;
width:auto;
}
@keyframes grayscale-animation {
0%, 100% { filter: grayscale(0%); }
50% { filter: grayscale(70%); }
}
.application-form ::-webkit-input-placeholder{
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.application-form ::-moz-placeholder{
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.application-form :-moz-placeholder {
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.application-form :-ms-input-placeholder {
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.application-form :focus::-webkit-input-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.application-form :focus::-moz-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.application-form :focus:-moz-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.application-form :focus:-ms-input-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.application-form form.webform-submission-form .js-form-item{
width:47%;
display:inline-block;
margin:0 0 2.5%;
}
.application-form form.webform-submission-form .js-form-item:nth-child(even){
width:47%;
display:inline-block;
margin:0 4% 2.5% 0;
}
.application-form form.webform-submission-form .js-form-item-full-name,
.application-form form.webform-submission-form .js-form-item-age-full-years{
margin:0 2% 2.5% 0;
width:47%;
display:inline-block;
}
.application-form form.webform-submission-form .js-form-item input[type="number"],
.application-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 13.5px 13px 14.5px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size:.95em;
color:#000;
letter-spacing:.3px;
font-family: 'UAFSans'!important;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item{
width: 100%;
display: block;
margin: 25px auto 2.5%!important;
margin-right: 0px;
text-align:left;
padding:2% 0;
border:none;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .form-radio {
display: none;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding:4px;
font-size:.8em;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
color: #0399B5;
transition: all 0.3s ease;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .form-radio:checked + .option {
background-color: #F39200;
border-color: #F39200;
color: white;
position: relative;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .fieldset-wrapper .js-form-item{
width:auto;
display:inline-block;
margin:-0px 14px 0 0!important;
text-align:left;
padding:0%;
color:#000;
background:transparent;
cursor:pointer;
}
.application-form form.webform-submission-form .js-form-item.js-form-type-textarea{
width: 98%;
display: inline-block;
margin: 0% 0 15px!important;
}
.application-form form.webform-submission-form .js-form-item textarea{
border: 2.2px solid #2c2c2c;
padding: 13.5px 20px 14.5px;
width: 94.5%;
max-width: 94.5%;
min-width: 94.5%;
height: 110px;
min-height: 110px;
max-height: 162px;
font-size:.95em;
color:#000;
font-family: 'UAFSans'!important;
background: rgba(255,255,255,.19);
margin-top: 2px;
}
.application-form form.webform-submission-form .js-form-item.js-form-type-webform-markup{
width:100%;
display:block;
margin: 0 0 .5%;
}
.application-form form.webform-submission-form input.webform-button--submit{
width: 98%;
color: #fff;
position: relative;
display: block;
z-index: 9;
font-size: .89em;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 700;
margin: 1em 0 0em;
padding: 20.5px 0px 20.5px;
cursor: pointer;
text-align: center;
border-radius: 35px;
opacity: 1;
border: none;
box-shadow: 0 0 4px rgba(0, 0, 0, .45);
background: linear-gradient(-45deg, #2ebed9, #2ebed9, #0399B5, #129eb8);
overflow: hidden;
animation: gradient 4s ease infinite;
background-size: 200% 200%;
}
.application-form form.webform-submission-form input.webform-button--submit:hover{
z-index:99;
color:#FFF;
background:#232323;
-webkit-transition: all .58s;
-moz-transition: all .58s;
-o-transition: all .58s;
-ms-transition: all .58s;
transition: all .58s;
}
/**/
/* Оновлені вакансії підрозділів */
.unit-facets{
position: relative;
display: block;
background: #fff;
text-align: left;
padding: 2.5%;
margin: 2% 20px 3.5em;
box-shadow:0px 0px 12px 5px rgba(0, 0, 0, 0.15);
}
.unit-facets h3 {
position: relative;
display: block;
font-size: 1.28em;
font-weight: 600;
color: #1c1c1c;
border-bottom: 1.85px solid #0399B5;
padding: 0 0 5px;
margin: 15px 0 20px;
}
.unit-facets ul {
text-align: left;
padding: 1%;
margin: 0;
background: rgba(0,0,0,.032);
}
.unit-facets ul li {
position: relative;
display: inline-block;
margin: 0 7px 0 0;
padding: 5px 3px 5px 0px;
}
.unit-facets input {
display: none;
}
.unit-facets .js-form-item {
position: relative;
display: inline-block;
}
.unit-facets .form-checkboxes {
text-align: left;
}
.unit-facets ul {
text-align: left;
padding: 1%;
margin: 0;
background: rgba(0, 0, 0, .032);
}
.unit-facets li:last-child {
margin: 0
}
.unit-facets label {
font-size:.95em;
font-weight: 500;
padding: 9px 6px 8px 3px;
cursor: pointer;
line-height: 1;
background: transparent;
color: #0399B5;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.unit-facets label:before {
content: '#';
color: #0399B5;
font-size: 16.75px;
padding: 9px 3px 9px 2px;
}
.unit-facets label:hover {
background: #0399B5;
color: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.unit-facets label:hover:before {
color: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.unit-facets [type=checkbox]:checked~label {
background: #0399B5;
color: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.unit-facets [type=checkbox]:checked~label:before {
content: '+';
-webkit-transition: all .15s ease;
-moz-transition: all .15 ease;
-ms-transition: all .15s ease;
-o-transition: all .15s ease;
transition: all .15s ease;
}
.unit-facets [type=checkbox]:checked~label:before {
color: #fff;
}
.unit-positions-section{
position: relative;
display: block;
width:97%;
margin:0 auto;
}
.unit-positions-section .views-field.views-field-title{
display:inline-block;
width:48%;
margin-bottom:1em;
vertical-align:top;
}
.unit-positions-section .views-field.views-field-title:nth-child(2n+1){
margin-right:3%;
}
.position-row {
position: relative;
overflow: hidden;
width: 90%;
min-height:60px; /* або auto, якщо треба підлаштовувати */
border: 1.75px solid #040404;
padding: 10px 25px;
font-size: 17.5px;
background: #fff;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
cursor: pointer;
transition: all .34s ease;
display: flex;
align-items: center; /* центрування по вертикалі */
justify-content: center; /* центрування по горизонталі */
text-align: center; /* перенос і вирівнювання тексту */
-webkit-transition: all .15s ease;
-moz-transition: all .15 ease;
-ms-transition: all .15s ease;
-o-transition: all .15s ease;
transition: all .15s ease;
}
.position-row:hover{
border: 1.75px solid #0399B5;
-webkit-transition: all .15s ease;
-moz-transition: all .15 ease;
-ms-transition: all .15s ease;
-o-transition: all .15s ease;
transition: all .15s ease;
}
/* Прихований оригінальний текст — тільки для висоти */
.position-row .text-wrapper {
visibility: hidden;
}
/* Текст із data-text — показується завжди */
.position-row::before {
content: attr(data-text);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.55s ease, opacity 0.55s ease;
opacity: 1;
width: 90%;
text-align: center;
line-height: 1.3;
white-space: normal; /* дозволяємо перенос */
}
/* “Подати заявку” — приховано знизу */
.position-row .alt-text {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
transition: transform 0.55s ease, opacity 0.55s ease;
white-space: nowrap;
text-align: center;
}
/* При наведенні — основний текст їде догори, заявка виїжджає на центр */
.position-row:hover::before {
transform: translate(-50%, -150%);
opacity: 0;
}
.position-row:hover .alt-text {
transform: translate(-50%, -50%);
top: 50%;
opacity: 1;
}
/* Загальні стилі для overlay */
.form-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: 999;
}
.form-overlay.active {
opacity: 1;
visibility: visible;
}
/* Стилі для вікна (тепер центрованого) */
.side-form {
display: none; /* форма неактивна спочатку */
pointer-events: none; /* не клікабельна, поки не активна */
}
.side-form.active {
pointer-events: auto; /* знову клікабельна */
}
/* Активний стан — показуємо в центрі */
.side-form.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* Стилі для кнопки закриття */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: transparent;
border: none;
color: #fff;
font-size: 30px;
font-weight: 200;
cursor: pointer;
display: block;
z-index: 9;
}
/* Заборона скролу на body */
body.no-scroll {
overflow: hidden;
}
/**/
.side-form {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8); /* Початкове положення — трохи зменшене */
background-color: #fff;
box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, 0.15);
padding:2% 1%;
box-sizing: border-box;
z-index: 1000;
transition: transform 0.3s ease, opacity 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
border-radius: 12px; /* можна додати для краси */
max-width: 90vw; /* обмеження ширини */
max-height: 90vh; /* обмеження висоти */
overflow-y: auto; /* якщо контент великий */
width:45%;
font-family: 'UAFSans'!important;
}
.side-form .form-logo img{
height:90px;
width:auto;
}
.side-form .form-content{
position: relative;
display: block;
text-align: center;
width: 100%;
}
.side-form .form-content h3{
position: relative;
display: block;
text-align: center;
width: 100%;
margin: 15px auto 15px;
padding: 20px 0;
font-size:.97em;
background: rgba(3, 153, 181,.06);
}
.side-form form.webform-submission-form{
display:block;
}
.side-form form.webform-submission-form .js-form-item{
width:48%;
display:inline-block;
margin:0 0 2.5%;
text-align:left;
}
.side-form form.webform-submission-form .js-form-item label{
font-size:.85em;
font-family: 'UAFSans'!important;
color:#232323;
transition: color 0.3s ease, transform 0.3s ease;
display: inline-block; /* або block, якщо потрібно */
position: relative;
margin-bottom:1px;
font-weight:500;
transform: translateY(1px);
}
.side-form form.webform-submission-form .form-required{display:inline-block;overflow:visible;border:0px solid green;position:relative;line-height:1;}
.side-form form.webform-submission-form .form-required:after {
display: inline-block;
width: 6px;
height: 6px;
position:absolute;
right:-8px;
top:-1px;
content: "";
vertical-align: super;
background-image: url(/core/misc/icons/ee0000/required.svg);
background-repeat: no-repeat;
background-size: 6px 6px;
}
.side-form form.webform-submission-form .js-form-item:nth-child(2n) {
width: 48%;
display: inline-block;
margin: 0px 3% 2.5% 0px;
}
.side-form form.webform-submission-form .js-form-item input[type="number"],
.side-form form.webform-submission-form .js-form-item input[type="text"]{
/*border: 2.2px solid #2c2c2c;*/
border:none;
border-bottom:1.65px solid #777;
outline:none!important;
padding: 13px 10px 13px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size:.8em;
color:#000;
letter-spacing:.3px;
font-family: 'UAFSans'!important;
background:rgba(0, 0, 0, .033);
}
.side-form form.webform-submission-form .js-form-item.js-form-type-textarea {
width: 99%;
max-width: 99%;
overflow:hidden;
display: inline-block;
margin: 0% 0px 15px !important;
}
.side-form form.webform-submission-form .js-form-item textarea {
border:none;
border-bottom:2px solid #777;
outline:none!important;
padding: 14.5px 15px 14.5px;
width: 94.5%;
max-width: 94.5%!important;
min-width: 94.5%;
height: 50px;
min-height: 50px;
max-height: 92px;
font-size: .95em;
color: #000;
font-family: 'UAFSans'!important;
background:rgba(0, 0, 0, .033);
margin-top: 2px;
}
.side-form form.webform-submission-form .js-form-item textarea:focus,
.side-form form.webform-submission-form .js-form-item input[type="number"]:focus,
.side-form form.webform-submission-form .js-form-item input[type="text"]:focus{
border-bottom:2px solid #0399B5;
}
.side-form form.webform-submission-form .js-form-item:has(textarea:focus) label,
.side-form form.webform-submission-form .js-form-item:has(input:focus) label {
color: #0399B5;
transform: translateY(-3px);
}
.side-form form.webform-submission-form input.webform-button--submit{
width: 98%;
color: #fff;
position: relative;
display: block;
text-transform:uppercase;
z-index: 9;
font-family: 'UAFSans'!important;
font-size:1em;
letter-spacing: .15px;
font-weight: 700;
margin:0px auto 15px;
padding: 18px 0px 18px;
cursor: pointer;
text-align: center;
border-radius: 7px;
opacity: 1;
border: none;
box-shadow: 0 0 4px rgba(0, 0, 0, .45);
background: linear-gradient(-45deg, #2ebed9, #2ebed9, #0399B5, #129eb8);
overflow: hidden;
animation: gradient 4s ease infinite;
background-size: 200% 200%;
}
.side-form form.webform-submission-form input.webform-button--submit:hover{
z-index:99;
color:#FFF;
background:#232323;
-webkit-transition: all .58s;
-moz-transition: all .58s;
-o-transition: all .58s;
-ms-transition: all .58s;
transition: all .58s;
}
/**/
/* Сторінка Вакансії */
.vacancie-page{
position:relative;
display:block;
/*background:#e8e8e8;*/
background:#F8F8F8;
padding-top:4.3em;
}
.go-vacancie-btn{
position: absolute;
top:12px;
right:2.5%;
padding: 15px 60px 15px;
display: inline-block;
border: 2.4px solid #0399B5;
background: transparent;
color: #000;
border-radius: 35px;
font-size: .77em;
margin-right:2em;
line-height:1;
letter-spacing: .05px;
overflow: hidden;
box-shadow: 0 0 3.5px rgba(0, 0, 0, .15);
font-weight: 600;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: color 0.65s ease-in-out, border-color 0.65s ease-in-out;
}
.go-vacancie-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #0399B5;
transform: translate(-50%, -50%) rotate(45deg);
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
z-index: -1;
}
.go-vacancie-btn:hover {
color: white;
border-color: #0399B5;
}
.go-vacancie-btn:hover:before {
width: 600%;
height: 600%;
}
.brigade-head{
width:78.3%;
position:relative;
display:block;
margin:0 auto 0;
padding:0;
height:460px;
overflow:hidden;
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
box-shadow: rgba(0, 0, 0, 0.17) 0px 0px 12.5px;
}
.brigade-head .hello-chevrons {
position: absolute;
top: 50%;
z-index: 9;
display: block;
transform: translate(0, -50%);
right: 2.5%;
border: 0px solid green;
}
.brigade-head .container-perspective{
perspective: 600px;
transform-style: preserve-3d;
display:grid;
place-items:center;
}
.brigade-head .hello-chevrons img{
height:270px;
width:auto;
display:inline-block;
}
.brigade-head h3{
position: absolute;
width:70%;
top: 50%;
transform: translate(-3%, -50%);
left:5%;
color: white;
text-align: left;
font-size: 2em;
padding:0;
margin:0;
font-weight: bold;
z-index: 9;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.motto-vacancie-page{
overflow: hidden;
width:78.3%;
position:relative;
display:block;
margin:0 auto 0;
z-index:10;
}
.motto-vacancie-page .lines {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background:#0399B5;
padding:1.1em 0;
}
.motto-vacancie-page .line {
animation: marquee 125s linear infinite;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
white-space: nowrap;
}
.motto-vacancie-page .line span {
padding-right: 2.5em;
color:#fff;
font-size:17px;
}
.motto-vacancie-page .line span:after {
content: '○';
margin-left: 2.5em;
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.vacancies-body{
position:relative;
display:block;
width:71%;
background:#fff;
margin:0% auto 0;
text-align:left;
padding:3% 3%;
border-bottom: 10.5px solid #0399B5;
border-right: 10.5px solid #0399B5;
border-left: 10.5px solid #0399B5;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 12.5px;
/*box-shadow:inset 1px 1px 12px 5px rgba(0,0,0,0.15);*/
}
.vacancies-top-label{
text-transform:uppercase;
font-size:1.5em;
color:rgba(106,101,58,.31);
font-weight:500;
display:block;
margin:20px 0 30px;
text-align:center;
}
.vacancies-body h1{
position: relative;
display: inline-block;
width: 100%;
padding: 0;
letter-spacing: 1.04px;
font-size: 2.7em;
padding:0;
margin:0 0 1.2em;
font-weight: 600;
line-height: 1.3;
z-index: 7;
color: #000;
text-align: center;
}
.salary{
display:inline-block;
padding:15px 7px;
background:rgba(0,0,0,.032);
margin:5px 0 15px;
width:100%;
}
.salary div{
position:relative;
display:inline-block;
padding-left:37px;
}
.salary div:before{
content:'';
position:absolute;
top:-4.5px;
left:0px;
width:29px;
height:29px;
background-image: url(/images/uah.png);
background-size: cover;
background-repeat: no-repeat;
}
.benefits{
position:relative;
padding:15px 3px;
width:100%;
margin:5px 0 40px;
text-align:left;
}
.benefits span{
display:inline-block;
padding:17px 14px;
color:#000;
font-size:15.5px;
line-height:1;
font-weight:400;
margin:0 10px 10px 0;
position:relative;
background:rgba(0,0,0,.041);
}
.benefits span:before{
content:"#";
display:inline-block;
margin-right:4px;
}
.field-label{
position:relative;
display:block;
font-size:1.13em;
font-weight:600;
color:#0399B5;
border-bottom:1.85px solid #0399B5;
padding:0 0 5px;
margin-bottom:30px;
}
.node-field{
position:relative;
display:block;
margin-bottom:55px;
}
.node-field:nth-child(3){
position:relative;
display:block;
margin-bottom:30px;
}
.vacancies-body p{
font-size:.93em;
line-height:1.5;
color:#000;
margin-bottom:25px;
}
.vacancies-body h3{
font-size: 1.23em;
margin-block-start: 1.5em;
}
.vacancies-body li{
font-size:.9em;
color:#000;
margin-bottom:15px;
background: url("./images/plus.png") no-repeat 0px 3px;
background-size: 17px 17px;
padding: 0 0 0 25px;
line-height: 1.55;
list-style: none;
}
.powerup .power-info ul li {
list-style: none;
background: url(/themes/ga/images/g-list-b.png) no-repeat center center;
background-size: 22px 17px;
line-height: 1.55;
font-size: 1.01em;
font-weight: 400;
text-indent: 0;
margin: 0 0 20px;
padding: 0 0 0 40px;
}
.vacancies-body li:last-child{
margin-bottom:0px;
}
.vacancies-body ul{
margin:21px 0 21px 1.85%;
padding:0;
}
.vacancies-tags{
position:relative;
display:block;
padding:15px 7px 17px;
margin:15px 0 35px -10px;
background:rgba(0,0,0,.032);
width:100%;
}
.vacancies-tags a{
font-size:14.7px;
font-weight:500;
padding:9px 6px 9px 6px;
margin:0 4px 0 0;
line-height:1;
background:transparent;
color:#0399B5;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.vacancies-tags a:last-child{margin:0}
.vacancies-tags a:hover{
background:#0399B5;
color:#fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
/**/
.vacancy-application-title{
position:relative;
display:block;
text-align:center;
width:85%;
margin:15px auto 15px;
padding:25px 0;
background:rgba(3, 153, 181,.06);
}
.vacancy-application-title span.vacancies-label{
display: inline-block;
color: #000;
font-size: .95em;
line-height: 1;
margin-right:5px;
font-weight: 100;
}
.vacancy-application-title span {
display: inline-block;
color: #000;
font-size: 1.1em;
line-height: 1;
font-weight: 500;
}
/**/
.vacancy-form ::-webkit-input-placeholder{
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.vacancy-form ::-moz-placeholder{
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.vacancy-form :-moz-placeholder {
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.vacancy-form :-ms-input-placeholder {
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.vacancy-form :focus::-webkit-input-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.vacancy-form :focus::-moz-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.vacancy-form :focus:-moz-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.vacancy-form :focus:-ms-input-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.vacancy-form{
position:relative;
display:block;
width:85%;
margin:0 auto;
padding:3% 4%;
}
.vacancy-form form.webform-submission-form .js-form-item{
width:46%;
display:inline-block;
margin:0 0 3.5%;
text-align:left;
}
.vacancy-form form.webform-submission-form .js-form-item label{
font-size:.9em;
color:#232323;
transition: color 0.3s ease, transform 0.3s ease;
display: inline-block; /* або block, якщо потрібно */
position: relative;
margin-bottom:6px;
}
.vacancy-form form.webform-submission-form .js-form-item label.label-active {
color:#0399B5;
transform: translateY(-9px);
}
.vacancy-form form.webform-submission-form .form-required{display:inline-block;overflow:visible;border:0px solid green;position:relative;line-height:1;}
.vacancy-form form.webform-submission-form .form-required:after {
display: inline-block;
width: 6px;
height: 6px;
position:absolute;
right:-8px;
top:-1px;
content: "";
vertical-align: super;
background-image: url(/core/misc/icons/ee0000/required.svg);
background-repeat: no-repeat;
background-size: 6px 6px;
}
.vacancy-form form.webform-submission-form .js-form-item:nth-child(2n) {
width: 46%;
display: inline-block;
margin: 0px 5% 3.5% 0px;
}
.vacancy-form form.webform-submission-form .js-form-item input[type="number"],
.vacancy-form form.webform-submission-form .js-form-item input[type="text"]{
/*border: 2.2px solid #2c2c2c;*/
border:none;
border-bottom:2px solid #777;
outline:none!important;
padding: 20.5px 15px 20.5px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size:.95em;
color:#000;
letter-spacing:.3px;
font-family: 'UAFSans'!important;
background:rgba(0, 0, 0, .033);
}
.vacancy-form form.webform-submission-form .js-form-item.js-form-type-textarea {
width: 99%;
display: inline-block;
margin: 0% 0px 15px !important;
}
.vacancy-form form.webform-submission-form .js-form-item textarea {
border:none;
border-bottom:2px solid #777;
outline:none!important;
padding: 20.5px 15px 20.5px;
width: 94.5%;
max-width: 94.5%;
min-width: 94.5%;
height: 170px;
min-height: 170px;
max-height: 222px;
font-size: .95em;
color: #000;
font-family: 'UAFSans'!important;
background:rgba(0, 0, 0, .033);
margin-top: 2px;
}
.vacancy-form form.webform-submission-form .js-form-item textarea:focus,
.vacancy-form form.webform-submission-form .js-form-item input[type="number"]:focus,
.vacancy-form form.webform-submission-form .js-form-item input[type="text"]:focus{
border-bottom:2px solid #0399B5;
}
.vacancy-form form.webform-submission-form input.webform-button--submit{
width: 98%;
color: #fff;
position: relative;
display: block;
z-index: 9;
font-size: .89em;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 700;
margin: 30px auto 13px;
padding: 20.5px 0px 20.5px;
cursor: pointer;
text-align: center;
border-radius: 35px;
opacity: 1;
border: none;
box-shadow: 0 0 4px rgba(0, 0, 0, .45);
background: linear-gradient(-45deg, #2ebed9, #2ebed9, #0399B5, #129eb8);
overflow: hidden;
animation: gradient 4s ease infinite;
background-size: 200% 200%;
}
.vacancy-form form.webform-submission-form input.webform-button--submit:hover{
z-index:99;
color:#FFF;
background:#232323;
-webkit-transition: all .58s;
-moz-transition: all .58s;
-o-transition: all .58s;
-ms-transition: all .58s;
transition: all .58s;
}
/**/
.vacancy-button {
padding: 24px 111px 24px;
cursor: pointer;
outline: none;
font-size:.9em;
text-transform: uppercase;
color: #fff;
font-family: 'UAFSans';
margin: 7.5% auto 4em;
display: block;
width:55%;
position: relative;
font-weight:700;
border-radius:35px;
border:none;
line-height:1;
letter-spacing: .25px;
overflow: hidden;
box-shadow: 0 0 4px rgba(0, 0, 0, .45);
background: #F39200;
overflow: hidden;
-webkit-animation: pulse 2.25s infinite;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
.vacancy-button:hover {
-webkit-animation: none;
background:#0399B5;
color:#1c1c1c;
box-shadow:0 0 4px rgba(0,0,0,.45);
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
/**/
.related-vacancies{
position:relative;
display:none;
width:79%;
margin:7em auto 0;
}
.related-vacancies.check-block{
display:block;
}
.related-vacancies h3{
font-size: 3.5em;
font-weight: bold !important;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #F39200;
margin: 0px 0 .55em;
}
.related-vacancies .vacancie-row{
position:relative;
display:inline-block;
margin:0 0 2.5%;
padding: 1.5%;
border: 2.5px solid #0399B5;
width:45%;
vertical-align:top;
}
.related-vacancies .vacancie-row:nth-child(even){
margin:0 2.5% 2.5% 0;
}
.related-vacancies .vacancie-row-inner{
text-align:left;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 0 12.5px rgba(0, 0, 0, .07);
color:#000;
padding:8% 4%;
display:table;
width:91%;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.related-vacancies .vacancie-row:hover .vacancie-row-inner{
box-shadow: 0 0 12.5px rgba(0, 0, 0, .33);
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.related-vacancies .vacancie-row span{
font-size:1.08em;
font-weight:500;
display:table-cell;
width:100%;
vertical-align:middle;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.related-vacancies .vacancie-row:hover .vacancie-row-inner span{
color:#0399B5;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.related-vacancies .vacancie-row:last-child{
margin:0 0 0em;
}
.related-vacancies .vacancie-row .go-v{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
left:0;
background:transparent;
}
.related-vacancies .vacancie-row .bottom-go{
position:absolute;
bottom:23px;
right:28px;
width:40px;
height:40px;
display:block;
background-image: url("./images/btn-arrow-vacancie.png");
background-size:16px 16px;
background-repeat: no-repeat;
background-position:center center;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.related-vacancies .vacancie-row:hover .bottom-go{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
/*
.go-brigade-btn{display:none;}*/
.go-brigade-btn{
position:relative;
display:block;
width:39%;
padding: 23px 0px 23px;
border: 2.4px solid #222123;
background:transparent;
color: #000;
text-align:center;
border-radius: 35px;
font-size: .94em;
margin:4em auto 0;
line-height:1;
letter-spacing: .05px;
overflow: hidden;
box-shadow: 0 0 3.5px rgba(0, 0, 0, .15);
font-weight: 400;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: color 0.65s ease-in-out, border-color 0.65s ease-in-out;
}
.go-brigade-btn:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #0399B5;
transform: translate(-50%, -50%) rotate(45deg);
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
z-index: -1;
}
.go-brigade-btn:hover {
color: white;
border-color: #0399B5;
border: 2.4px solid #0399B5;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.go-brigade-btn:hover:before{
width: 1100%;
height: 1100%;
}
/**/
/* Окрема сторінка Вакансії */
.navy-positions-page .center-logo h2 a{color:#000}
.big-motto{
overflow: hidden;
width:100%;
position:relative;
display:block;
margin:2.55em auto 0;
z-index:10;
}
.big-motto .lines {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background:transparent;
padding:1.1em 0;
}
.big-motto .line {
animation: marquee 455s linear infinite;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
white-space: nowrap;
}
.big-motto .line span {
padding:0 0 0 1.25em;
color:#000;
text-transform:uppercase;
font-size:13em;
font-weight:bold;
font-family: Oswald;
letter-spacing:1px;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.big-motto:hover .line span{
color:#F8F8F8!important;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.big-motto .line span span{
color:#0399B5;
font-size:1em;
padding-right:0em;
}
.title-section{
position:relative;
display:block;
text-align:center;
margin:0em auto;
width:85%;
}
.title-section h1{
font-size: 4em;
font-weight: 700;
line-height: 1.3;
font-family: Oswald !important;
margin: 10px 0px .5em;
letter-spacing:1px;
color:#0399B5;
}
.title-section p{
font-size: 1.75em;
line-height: 1.55;
font-weight:700;
margin-bottom: 11px;
}
.title-section p{
font-size: 1.27em;
line-height: 1.55;
font-weight:600;
margin:0 0 16px;
padding:0;
}
.title-section p strong{
color: #F39200;
font-size:1.45em;
}
/**/
.navy-positions{
position:relative;
display:block;
width:80%;
margin:4em auto 0;
}
.navy-positions .views-row{
position:relative;
display:inline-block;
margin:0 0 2.5%;
padding: 1.5%;
border: 2.5px solid #0399B5;
width:45%;
vertical-align:top;
}
.navy-positions .views-row:nth-child(odd){
margin:0 2.5% 2.5% 0;
}
.navy-positions .vacancie-row-inner{
text-align:left;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 0 12.5px rgba(0, 0, 0, .07);
color:#000;
padding:8% 4%;
display:table;
width:91%;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.navy-positions .views-row:hover .vacancie-row-inner{
box-shadow: 0 0 12.5px rgba(0, 0, 0, .33);
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.navy-positions .views-row span{
font-size:1.08em;
font-weight:500;
display:table-cell;
width:100%;
vertical-align:middle;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.navy-positions .views-row:hover .vacancie-row-inner span{
color:#0399B5;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.navy-positions .views-row:last-child{
margin:0 0 0em;
}
.navy-positions .views-row .go-v{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
left:0;
background:transparent;
}
.navy-positions .views-row .bottom-go{
position:absolute;
bottom:23px;
right:28px;
width:40px;
height:40px;
display:block;
background-image: url("./images/btn-arrow-vacancie.png");
background-size:16px 16px;
background-repeat: no-repeat;
background-position:center center;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.navy-positions .views-row:hover .bottom-go{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.js-pager__items.pager{
padding:0!important;
margin:0!important;
display:block;
text-indent:0;
}
.js-pager__items.pager li {
text-align: center;
padding:0;
margin:0;
display:block;
text-indent:0;
margin: 35px 0px 15px;
}
.js-pager__items.pager li a {
color: #fff;
position: relative;
display: inline-block;
z-index: 9;
font-size: .89em;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 700;
margin: 4em 0 1em;
padding: 20.5px 94px 20.5px;
cursor: pointer;
text-align: center;
border-radius: 35px;
opacity: 1;
border: none;
box-shadow: 0 0 4px rgba(0, 0, 0, .45);
background: linear-gradient(-45deg, #2ebed9, #2ebed9, #0399B5, #129eb8);
overflow: hidden;
animation: gradient 4s ease infinite;
background-size: 200% 200%;
}
.js-pager__items.pager li a:hover{
background:#000;
color:#fff;
box-shadow:2px 2px 5px #ccc;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
/**/
/* Спец Проекти */
/* Головна сторінка 18 - 24 */
.slider.lymon{
position:relative;
display:block;
height:90vh;
overflow:hidden;
}
.slider.lymon .slick-slide{
position:relative;
}
.slider.lymon .slick-slide img:nth-child(1){
width:100%;
height:auto;
}
.mobile-slider{
display:none;
}
.web-slider{
display:block;
}
.lymon-info{
position:absolute;
display:inline-block;
bottom:6em;
left:3%;
}
.lymon-info img{
height:auto;
width:100px;
max-width:100px;
margin-bottom:17px;
}
.lymon-info a.unit-name-link{
position: relative;
display:block;
font-size: 2.9em;
font-weight: 700;
line-height: 1.3;
color: #fff;
text-transform: uppercase;
font-family: Oswald;
padding: 0px;
margin: 0px 0 15px;
}
#lymon-go{
position:relative;
display:inline-block;
margin: 1.15em 0 0em;
padding: 20.5px 94px 20.5px;
background: #F39200;
color: #fff;
z-index: 12;
font-size: .89em;
font-weight: 600;
letter-spacing: .15px;
line-height:1;
border-radius: 35px;
cursor:pointer;
text-transform: uppercase;
box-shadow:0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-webkit-animation: pulse 2.25s infinite;
}
#lymon-go:hover {
-webkit-animation: none;
background:#0399B5;
color:#1c1c1c;
box-shadow:0 0 4px rgba(0,0,0,.45);
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
/**/
.main-title-section{
position:relative;
display:block;
width:90%;
margin:6em auto 0;
text-align:center;
}
.main-title-section h1{
font-size: 3.9em;
font-weight: 900;
line-height: 1.2;
color: rgb(3, 153, 181);
font-family: Oswald;
padding: 0px;
margin: 0px 0px .5em;
}
.main-title-section p{
width:60%;
display:block;
margin:0 auto 0;
font-size:1.1em;
line-height:1.5;
}
.benefits-section {
width: 93%;
margin: 3.5em auto 0;
display:block;
}
.benefits-section ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: nowrap; /* не переноситься */
gap: 20px;
counter-reset: item;
}
.benefits-section li {
position: relative;
background-color: #f2f2f2;
flex: 1 1 0; /* ростуть рівномірно */
aspect-ratio: 2 / 3; /* прямокутна форма */
padding: 15px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
font-size: 1.1em;
text-transform:uppercase;
font-family: Oswald;
border-radius: 12px;
font-weight:500;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
overflow: hidden;
transition: transform 0.2s ease;
border:2.5px solid transparent;
min-width: 100px; /* щоб не ставали надто вузькими */
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.benefits-section li:hover {
transform: translateY(-4px);
border:2.5px solid #0399B5;
box-shadow:0 0 3.5px rgba(30,30,30,.45);
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.benefits-section li::before {
content: counter(item, decimal-leading-zero);
counter-increment: item;
position: absolute;
top: 10px;
right: 12px;
font-size: 4em;
font-weight: bold;
font-family: Oswald;
color: rgba(3, 153, 181,.15);
}
.special-units-section{
position:relative;
display:block;
width:90%;
margin:8em auto 0;
text-align:center;
}
.special-units-section h2{
font-size: 3.5em;
font-weight: 900;
line-height: 1.2;
color:rgb(243, 146, 0);
font-family: Oswald;
text-transform:uppercase;
padding: 0px;
margin: 0px 0px 1.15em;
}
.special-units-row{
position:relative;
display:inline-block;
width:40%;
text-align:center;
vertical-align:top;
padding:3% 3% 0;
margin-bottom:3%;
background:#f2f2f2;
border:2.5px solid transparent;
}
.special-units-row:hover{
border:2.5px solid #0399B5;
box-shadow:0 0 3.5px rgba(0,0,0,.45);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.special-units-row:hover img{
transform: scale(0.915);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.special-units-row:nth-child(even){
margin:0 3% 3%;
}
.special-units-row img{
height:auto;
width:31%;
display:block;
margin:0 auto 20px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.special-units-row a{
color:#000;
text-indent:2.5em;
font-size:.89em;
text-align:left;
padding:5px;
line-height:1.45;
margin-bottom:20px;
}
.special-units-row h4{
color: rgb(3, 153, 181);
font-size:1.24em;
text-align:center;
padding:0px;
line-height:1.45;
margin:12px 0px;
}
.special-units-row a.special-view{
display:inline-block;
padding:16px 95px;
font-size:.84em;
border-radius:30px;
margin-top:5px;
background:#ebebeb;
color:#fff;
text-indent:0;
background:#000;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.special-units-row a.special-view:hover{
color:#fff;
background:#F39200;
box-shadow:0 0 5.5px rgba(0,0,0,.55);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
/**/
/* Сторінка Бригади - Спец Проекти */
.special-hero-section{
position:relative;
display:block;
width:100%;
max-width:100%;
height:190vh;
max-height:190vh;
overflow:hidden;
margin-bottom:0px;
z-index:9;
background:#000;
overflow-x:hidden;
}
.million-btn {
position: absolute;
display: inline-block;
top:.75%;
border:none;
right:4%;
padding: 20.5px 74px 20.5px;
background: #F39200;
color: #fff;
z-index: 12;
font-size: .79em;
font-weight: 600;
letter-spacing: .15px;
line-height: 1;
border-radius: 35px;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-webkit-animation: pulse 2.25s infinite;
}
.million-btn:hover {
-webkit-animation: none;
background:#222123;
box-shadow:0 0 4px rgba(0,0,0,.45);
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
/****/
.sticky-button-yellow{
position: fixed;
z-index:6;
display:inline-block;
bottom: -65%;
transform: translate(-50%, 0)!important;
left:50%!important;
padding: 21.5px 114px 21.5px;
background: #F39200;
color: #fff;
z-index: 12;
font-size: .95em;
font-weight: 600;
letter-spacing: .15px;
line-height: 1;
border-radius: 35px;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
opacity: 0; /* Початково кнопка невидима */
}
@keyframes pulse32 {
0% {
transform: scale(0.945);
}
65% {
transform: scale(1.2);
box-shadow: 0 0 0 12px rgba(255, 208, 94, .195);
}
72% {
box-shadow: 0 0 0 32px rgba(255, 208, 94, .045);
}
88% {
box-shadow: 0 0 0 32px rgba(255, 208, 94, .015);
}
100% {
transform: scale(0.945);
box-shadow: 0 0 0 0 rgba(255, 208, 94, 0);
}
}
.sticky-button-yellow.show {
bottom: 5%;
opacity: 1;
-webkit-animation: pulse32 2.25s infinite;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.sticky-button-yellow:hover {
background:#222123;
box-shadow:0 0 4px rgba(0,0,0,.45);
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
/*****/
.special-hero-hover{
position: absolute;
display: block;
z-index: 10;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity:.49;
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8374999658066351) 10%, rgba(34, 33, 35, 0) 100%);
}
.special-hero-section .video-block {
position: fixed;
width: 100vw;
height: 100vh;
display: block;
bottom: 0;
object-fit: cover;
left: 0;
transition: filter 0.3s ease-in-out;
z-index: 1;
}
.special-hero-section .video-block video{
position:absolute;
width:auto;
max-width:120%;
min-width:100%;
min-height:100%;
max-height:100%;
height:100%;
top:0;
left:0;
}
.special-hero-section .banner-section{
position: fixed;
width: 100vw;
height: 100vh;
max-height: 100vh;
display: block;
bottom: 0;
object-fit: cover;
left: 0;
transition: filter 0.3s ease-in-out;
z-index: 1;
background-color:#000;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
.hero-section-title{
position:absolute;
display:block;
width:90%;
left:5%;
top:56vh;
z-index:12;
text-align:center;
}
.hero-section-title h1{
font-family: 'Oswald' !important;
font-size: 89px;
font-weight: 900;
line-height: 1.3;
padding: 0;
margin: 0 0 26px;
position: relative;
display: block;
color: #fff;
text-transform: uppercase;
}
.hero-section-title h4 {
display: block;
text-align: center;
font-size: 2.3em;
color: rgb(243, 146, 0);
line-height: 1.1;
font-weight: bold;
padding: 0px;
margin: 0px 0px 22px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
font-family: 'Oswald';
text-transform:uppercase;
}
.sroll-section-text{
position: absolute;
width: 92%;
left: 4%;
bottom: 10%;
z-index:12;
color: #fff;
text-align: center;
}
.sroll-section-text img{
height:130px;
width:auto;
margin-bottom:45px;
}
.sroll-section-text h2 {
color: #fff;
font-family: 'Oswald' !important;
font-size:53px;
font-weight: 700;
line-height: 1;
margin: 0 0 50px;
position: relative;
display: inline-block;
text-transform: uppercase;
text-align: center;
}
/* Початковий стан псевдоелементів */
.sroll-section-text h2::before,
.sroll-section-text h2::after {
content: '';
position: absolute;
bottom: -40%;
height: 170%;
background: #0399B5;
z-index: -1;
width: 0;
transition: width 1.2s ease-in-out;
}
/* Початкові позиції */
.sroll-section-text h2::before,
.sroll-section-text h2::after {
left: 50%;
transform: translateX(-50%);
}
/* Анімація після появи */
.sroll-section-text h2.visible::before,
.sroll-section-text h2.visible::after {
width: 110%; /* Повне розширення від центру */
}
.sroll-section-text p {
font-size:1.35em;
display:block;
width:75%;
font-weight: 400;
line-height: 1.3;
padding: 0;
margin: 0 auto;
}
.inner333{
position:relative;
display:block;
min-height:800px;
background:green;
}
.promo-special-section{
position:relative;
display:inline-block;
margin:-.3em auto 0;
width:86%;
z-index:12;
padding:7% 7%;
background:#222123;
}
.promo-special-section .promo-left{
position: relative;
width: 36%;
margin: 0 0 0 3%;
vertical-align: top;
border: 0px solid blue;
display: inline-block;
}
.promo-special-section .promo-left span{
position: relative;
display: block;
font-family: 'Oswald' !important;
text-transform: uppercase;
padding: 0;
margin: 15px 0 45px;
letter-spacing: 1.04px;
font-size: 3.95em;
font-weight: 900;
line-height: 1.14;
z-index: 7;
color: #fff;
text-align: left;
}
.promo-special-section .promo-left span strong{
color: #F39200;
font-weight: 900;
}
.promo-special-section .promo-left p {
font-weight: 400;
font-size: .95em;
line-height:1.55;
display: block;
text-align: left;
color: #fff;
}
.promo-special-section .promo-left p strong{
color: #0399B5;
font-weight: 900;
}
.promo-right{
display: inline-block;
position: relative;
vertical-align: top;
width: 52%;
z-index: 9;
border: 0px solid blue;
margin: 0% 0 0 7%;
text-align: left;
}
.promo-right ul {
width: 92%;
margin-left: 4%;
}
.promo-right li {
list-style: none;
background: url("./images/plus.png") no-repeat 2px 2px;
background-size: 18px 18px;
margin-bottom: 16px;
padding-left: 29px;
padding-bottom: 7px;
line-height: 1.35;
font-weight: 300;
text-indent: 0;
margin-left: -72px;
position: relative;
color: #fff;
font-size: .945em;
}
.promo-right li strong {
font-weight: bold!important;
color: #F39200!important;
font-size: 1.1em!important;
}
button{cursor:pointer!important;}
.promo-button {
position:relative;
display:inline-block;
padding: 18px 120px 18px;
display: inline-block;
border: 2.4px solid #0399B5;
background: #0399B5;
color: #fff;
border-radius: 35px;
font-size: .94em;
margin-top: 2.5em;
margin-bottom:7px;
line-height: 1;
letter-spacing: .05px;
overflow: hidden;
box-shadow: 0 0 3.5px rgba(0, 0, 0, .15);
font-weight: 600;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: color 0.65s ease-in-out, border-color 0.65s ease-in-out;
}
.promo-button:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #F39200;
transform: translate(-50%, -50%) rotate(45deg);
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
z-index: -1;
}
.promo-button:hover {
color: #000;
border-color: #fff;
}
.promo-button:hover:before {
width: 600%;
height: 600%;
}
/**/
.marine-corps-advantages {
width: 90%;
margin:6em auto 7em;
text-align: center;
}
.marine-corps-advantages img{
height:90px;
width:auto;
display:block;
margin:35px auto 19px;
}
.marine-corps-advantages h2 {
font-size: 70px;
font-weight: 900;
line-height: 1.2;
color: rgb(3, 153, 181);
text-transform:uppercase;
font-family: Oswald !important;
padding: 0px;
margin: 0px 0px 1em;
}
.marine-corps-rows {
display: flex;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.m-row {
width: 30%;
text-align: center;
box-sizing: border-box;
}
.m-row-icon {
width: 120px;
height: 120px;
margin: 0 auto;
background-color: #f0f0f0; /* Ледь сіра заливка */
border-radius: 50%;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Цікава тінь */
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.m-row-icon:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Об'ємніша тінь */
transform: translateY(-5px); /* Легке підняття */
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.marine-corps-advantages .m-row-icon img {
max-width: 60%;
height: auto;
margin:0;
padding:0;
}
.m-row span {
font-weight: bold;
display: block;
margin:30px 0 0;
text-transform:uppercase;
font-size:1.43em;
font-family: Oswald;
}
.m-row p {
font-size:.89em;
color: #1c1c1c;
line-height: 1.52;
margin-top: 18px;
text-align:center;
}
/**/
.special-form-section{
position:relative;
display:block;
overflow:hidden;
width:80%;
margin:9em auto 0;
}
.special-join-us{
position:relative;
display:block;
vertical-align:top;
text-align:center;
margin-bottom:2em;
}
.special-join-us h4{
font-size: 2.86em;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #222123;
margin: 0px 0 35px;
}
.special-join-us p{
font-size: .95em;
line-height: 1.4;
margin-bottom:18px;
color: #000;
display:block;
width:75%;
text-align:center;
margin:0 auto;
}
.special-application-form h2{
display: block;
font-weight: bold;
text-transform: uppercase;
font-size: 2.55em;
font-family: Oswald;
line-height: 1.1;
margin:15px 0 35px;
padding: 0px;
color: rgb(243, 146, 0);
}
.special-application-form{
position:relative;
display:block;
width:60%;
overflow:visible;
border:1px solid red;
margin:0 auto;
text-align:center;
padding:2.5%;
background:rgba(255,255,255,.67);
border: 2.5px solid #0399B5;
z-index: 9;
box-shadow: 0 0 12.5px rgba(0, 0, 0, .13);
}
.special-application-chevrons{
position: relative;
z-index:7;
display:block;
text-align:center;
margin:30px 0;
}
.special-application-chevrons img{
display:inline-block;
height:150px;
width:auto;
}
@keyframes grayscale-animation {
0%, 100% { filter: grayscale(0%); }
50% { filter: grayscale(70%); }
}
.special-application-form .js-form-type-textfield.form-item-unit{display:none!important}
.unit-keycrm{display:none!important}
.special-application-form ::-webkit-input-placeholder{
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form ::-moz-placeholder{
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form :-moz-placeholder {
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form :-ms-input-placeholder {
color:#0399B5;
font-size:.91em;
letter-spacing:.3px;
font-weight:400;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form :focus::-webkit-input-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form :focus::-moz-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form :focus:-moz-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form :focus:-ms-input-placeholder {
color:#000;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form form.webform-submission-form .js-form-item{
width:47%;
display:inline-block;
margin:0 0 2.5%;
text-align:left;
}
.special-application-form form.webform-submission-form .js-form-item:nth-child(odd){
width:47%;
display:inline-block;
margin:0 4% 2.5% 0;
}
.special-application-form form.webform-submission-form .js-form-item input[type="number"],
.special-application-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 13.5px 13px 14.5px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size:.95em;
color:#000;
letter-spacing:.3px;
font-family: 'UAFSans'!important;
}
.special-application-form form.webform-submission-form .webform-type-radios.js-form-item,
.modal-million form.webform-submission-form .webform-type-radios.js-form-item,
.special-application-form form.webform-submission-form #edit-contract-type--wrapper{
width:95%;
display:block;
text-align: left;
margin: 0px auto 2.5%;
}
#edit-contract-type--wrapper-legend {display:block;text-align:center;}
.special-application-form form.webform-submission-form .webform-type-radios span.fieldset-legend,
.webform-type-radios span{
display:block;
text-align:center;
font-size:2.05em;
margin:15px 0 35px;
font-weight:700;
line-height: 1.1;
padding: 0px;
color:#0399B5;
font-family: 'Oswald'!important;
}
.special-application-form form.webform-submission-form legend{
display:block;
margin:0 auto;
}
.modal-million .js-form-item-contract-type span,
.modal-million .webform-type-radios span.fieldset-legend{
display:block;
text-align:center;
font-size:1.65em;
margin:12px 0 20px;
font-weight:600;
line-height: 1.1;
padding: 0px;
color:#0399B5;
font-family: 'Oswald'!important;
}
.special-application-form .webform-type-radios .js-form-item-contract-type .js-form-item,
.modal-million form.webform-submission-form .js-form-item-contract-type .js-form-item,
.modal-million form.webform-submission-form #edit-contract-type--wrapper .js-form-item,
.special-application-form form.webform-submission-form #edit-contract-type--wrapper .js-form-item{
background:rgba(0,0,0,.033);
vertical-align:top;
width:45.5%;
padding:2.5% 1.5%;
float:left;
font-family: 'UAFSans';
cursor:pointer;
}
.special-application-form .webform-type-radios .js-form-item-contract-type .js-form-item:nth-child(odd),
.modal-million form.webform-submission-form .js-form-item-contract-type .js-form-item:nth-child(odd),
.modal-million form.webform-submission-form #edit-contract-type--wrapper .js-form-item:nth-child(odd),
.special-application-form form.webform-submission-form #edit-contract-type--wrapper .js-form-item:nth-child(odd){
margin:0;
}
.special-application-form .webform-type-radios .js-form-item-contract-type .js-form-item:first-child,
.modal-million form.webform-submission-form .js-form-item-contract-type .js-form-item:first-child,
.modal-million form.webform-submission-form #edit-contract-type--wrapper .js-form-item:first-child,
.special-application-form form.webform-submission-form #edit-contract-type--wrapper .js-form-item:first-child{
margin:0 3% 0 0;
}
.special-application-form .webform-type-radios .js-form-item-contract-type input,
.modal-million form.webform-submission-form .js-form-item-contract-type input,
.modal-million form.webform-submission-form #edit-contract-type--wrapper input,
.special-application-form form.webform-submission-form #edit-contract-type--wrapper input{
width:20px;
height:20px;
}
.special-application-form .webform-type-radios input[type="radio"].form-radio:checked,
.modal-million form.webform-submission-form .js-form-item-contract-type input[type="radio"].form-radio:checked,
.modal-million form.webform-submission-form #edit-contract-type--wrapper input[type="radio"].form-radio:checked ,
.special-application-form form.webform-submission-form #edit-contract-type--wrapper input[type="radio"].form-radio:checked {
accent-color:#0399B5;/* тут будь-який потрібний колір */
border:1.2px solid #777;
}
.modal-million form.webform-submission-form .js-form-item-contract-type input[type="radio"].form-radio:before ,
.modal-million form.webform-submission-form #edit-contract-type--wrapper input[type="radio"].form-radio:before ,
.special-application-form .webform-type-radios input[type="radio"].form-radio:before,
.special-application-form form.webform-submission-form #edit-contract-type--wrapper input[type="radio"].form-radio:before {
content: "";
width: 45%;
height: 45%;
background-color: #0399B5;
border-radius: 50%;
transform: scale(0);
transition: transform 0.2s ease-in-out;
}
.special-application-form .webform-type-radios input[type="radio"].form-radio:checked:before,
.modal-million .js-form-item-contract-type input[type="radio"].form-radio:checked:before ,
.modal-million form.webform-submission-form #edit-contract-type--wrapper input[type="radio"].form-radio:checked:before ,
.special-application-form form.webform-submission-form #edit-contract-type--wrapper input[type="radio"].form-radio:checked:before {
transform: scale(1);
-webkit-transition: all .33s;
-moz-transition: all .33s;
-o-transition: all .33s;
-ms-transition: all .33s;
transition: all .33s;
}
.special-application-form form.webform-submission-form .js-form-item.form-item-contract-type label{
display:inline-block!important;
vertical-align:middle!important;
margin:0 0 0 3px;
padding:0;
line-height:1;
transform: translate(0%, -18%);
font-size:1.04em;
letter-spacing:0;
font-weight:bold;
}
.modal-million form.webform-submission-form .js-form-item.form-item-contract-type label{
display:inline-block!important;
vertical-align:middle!important;
margin:0 0 5px 3px;
padding:0;
line-height:1;
font-family: 'Oswald'!important;
transform: translate(0%, -18%);
font-size:1.04em;
letter-spacing:0;
font-weight:bold;
}
.special-application-form form.webform-submission-form .js-form-item.form-item-contract-type .webform-element-description{padding:2%;}
.special-application-form form.webform-submission-form .js-form-item.form-item-contract-type .webform-element-description span{
display:block;
margin:5px 0 0;
font-size:.93em;
color:rgba(0,0,0,.8);
font-weight:500;
text-align:left;
}
.modal-million form.webform-submission-form .js-form-item.form-item-contract-type .webform-element-description span{
display:inline-block;
margin:0;
padding:0;
line-height:1.2;
font-size:.88em;
color:#222;
font-family: 'Oswald'!important;
}
.special-application-form form.webform-submission-form input.webform-button--submit{
width: 98%;
color: #fff;
position: relative;
display: block;
z-index: 9;
font-size: .89em;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 700;
margin: 20px auto 13px;
padding: 20.5px 0px 20.5px;
cursor: pointer;
text-align: center;
border-radius: 35px;
opacity: 1;
border: none;
box-shadow: 0 0 4px rgba(0, 0, 0, .45);
background: linear-gradient(-45deg, #2ebed9, #2ebed9, #0399B5, #129eb8);
overflow: hidden;
animation: gradient 4s ease infinite;
background-size: 200% 200%;
}
.special-application-form form.webform-submission-form input.webform-button--submit:hover{
z-index:99;
color:#FFF;
background:#232323;
-webkit-transition: all .58s;
-moz-transition: all .58s;
-o-transition: all .58s;
-ms-transition: all .58s;
transition: all .58s;
}
/* Сторінка Рід військ */
.military-branch-hello-section{
position:relative;
display:block;
margin:0;
padding:0;
height:80.5vh;
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
}
.military-branch-hover{
position: absolute;
display: block;
z-index: 8;
bottom: 0;
left: 0;
opacity:.55;
width: 100%;
height: 100%;
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8374999658066351) 20%, rgba(34, 33, 35, 0) 100%);
}
.military-branch-title{
position:absolute;
bottom:9%;
left:5%;
width:90%;
z-index:9;
text-align:center;
}
.military-branch-title h1{
font-family: 'Oswald'!important;
font-size:4em;
color:#fff;
font-weight: 700;
line-height: 1.3;
padding: 0;
margin: 0;
text-transform: uppercase;
}
.military-branch-body h2 {
font-size:3.8em;
font-weight: 900;
line-height: 1.2;
color:#000;
text-transform: uppercase;
font-family: Oswald;
padding: 0px;
display:block;
text-align:center;
margin: 0px auto 1em;
}
.military-branch-title img{
width:10%;
height:auto;
}
/**/
.motto-taxonomy {
overflow: hidden;
width: 100%;
}
.motto-taxonomy .lines {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background:#0399B5;
padding:1.1em 0;
}
.motto-taxonomy .line {
animation: marquee 185s linear infinite;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
white-space: nowrap;
}
.motto-taxonomy .line span {
padding-right: 2.5em;
color:#fff;
font-size:1em;
font-weight:500;
text-transform:uppercase;
}
.motto-taxonomy .line span:after {
content: '○';
margin-left: 2.5em;
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
/**/
.military-branch-body{
position:relative;
display:block;
width:90%;
margin:3em auto 0;
}
.military-branch-body .views-element-container{
margin:0em auto 6em;
}
.military-branch-body h3 {
font-size: 3.3em;
font-weight: 700;
line-height: 1.2;
font-family: Oswald;
padding: 0px;
color: #0399B5;
text-align:center;
margin: 0px 0 45px;
padding: 10px 0;
}
.military-branch-body .views-row{
display:inline-block;
text-align:center;
width:27%;
vertical-align:top;
margin:0 0 3%;
padding:1.5%;
background-color:#f2f2f2;
border:2.5px solid transparent;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.military-branch-body .views-row:hover {
border: 2.5px solid #0399B5;
box-shadow: 0 0 4.5px rgba(0, 0, 0, .35);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.military-branch-body .views-row:hover img{
transform: scale(0.9);
-webkit-transform: scale(0.9);
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.military-branch-body .views-row:nth-of-type(3n+2){
margin:0 2% 3%;
}
.military-branch-body .views-row img{
width:30%;
height:auto;
display:block;
margin:0 auto 25px;
text-align:center;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.military-branch-body .views-row a{
display:block;
font-size: 1em;
font-weight: 600;
color: #000;
text-align: center;
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
.military-branch-body .views-row:hover a{
color: #0399B5;
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
/**/
/* Фільтрація */
.positions-facets{
position:relative;
display:block;
width:80%;
margin:3em auto;
}
.positions-facets h2 {
position: relative;
display: block;
width:97%;
font-size: 1.48em;
font-weight: 600;
color: #1c1c1c;
border-bottom: 1.85px solid #0399B5;
padding: 0 0% 20px;
margin: 15px 0 30px 1.4%;
}
.unit-vacancies-block .block-facets-ajax,
.positions-facets .block-facets-ajax{
padding:3%;
background:#fff;
box-shadow: 0 0 12.5px rgba(0, 0, 0, .07);
margin:0 0 3em;
}
.unit-vacancies-block ul,
.positions-facets ul{
position:relative;
display:block;
padding:0;
margin:0;
}
.unit-vacancies-block ul li,
.positions-facets ul li{
position:relative;
display:inline-block;
padding:1.5%;
margin:0 10px 20px;
background: #F8F8F8;
}
/**/
.unit-vacancies-block .facets-checkbox,
.positions-facets .facets-checkbox {
position: absolute;
opacity: 0;
}
/* Контейнер перемикача — label */
.unit-vacancies-block .facets-checkbox + label ,
.positions-facets .facets-checkbox + label {
position: relative;
display: inline-flex;
align-items: center;
padding-left: 62px;
min-height: 28px;
cursor: pointer;
font-size:.85em;
}
/* Стиль самого перемикача */
.unit-vacancies-block .facets-checkbox + label::before ,
.positions-facets .facets-checkbox + label::before {
content: '';
position: absolute;
left: 0;
width: 50px;
height: 28px;
background-color: #ccc;
border-radius: 999px;
transition: background-color 0.3s;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Круг */
.unit-vacancies-block .facets-checkbox + label::after ,
.positions-facets .facets-checkbox + label::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
z-index: 2;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Хрестик — ліворуч */
.unit-vacancies-block .facets-checkbox + label span::before,
.positions-facets .facets-checkbox + label span::before {
content: '';
position: absolute;
left: 8px;
top: 5px;
font-size: 14px;
color: rgba(0, 0, 0, 0.3);
transition: opacity 0.3s;
z-index: 1;
}
/* Галочка — праворуч */
.unit-vacancies-block .facets-checkbox + label span::after,
.positions-facets .facets-checkbox + label span::after {
content: '';
position: absolute;
right: 8px;
top: 5px;
font-size: 14px;
color: white;
opacity: 0;
transition: opacity 0.3s;
z-index: 1;
}
/* Коли ввімкнено */
.unit-vacancies-block .facets-checkbox:checked + label::before ,
.positions-facets .facets-checkbox:checked + label::before {
background-color: #2196F3;
}
.unit-vacancies-block .facets-checkbox:checked + label::after ,
.positions-facets .facets-checkbox:checked + label::after {
transform: translateX(22px);
}
.unit-vacancies-block .facets-checkbox:checked + label span::before,
.positions-facets .facets-checkbox:checked + label span::before {
opacity: 0;
}
.unit-vacancies-block .facets-checkbox:checked + label span::after,
.positions-facets .facets-checkbox:checked + label span::after {
opacity: 1;
}
/**/
.drone-section {
width: 85%;
margin: 2em auto;
text-align: left;
}
.views-row {
display: inline-block;
width: 100%;
margin-bottom: 2em;
vertical-align: top;
}
.drone-category-banner {
display: inline-block;
width: 40%;
height: 200px;
background-size: cover;
background-position: center;
vertical-align: top;
transition: background-image 0.5s ease;
}
.drone-category-description {
display: inline-block;
width: 45%;
margin-left: 7%;
vertical-align: top;
}
/* Приховуємо текстове значення в .drone-category-banner */
.drone-category-banner::before {
content: '';
display: block;
width: 100%;
height: 100%;
}
.drone-category-banner {
color: transparent;
font-size: 0;
}
/**/
.unit-weaponry li, .unit-traditions li, .brigade-overview li{margin-bottom:15px}
/**/
#footer{
position:relative;
display:block;
padding:50px 0 90px;
background:#222123;
margin:8em 0 0;
box-shadow:0 0 5px #222123;
}
.hashtag{
position:relative;
display:inline-block;
text-align:center;
margin:2em 0 0;
width:100%;
}
.hashtag a{
color:#fff;
font-size:4em;
font-family: 'Oswald';
font-weight:bold;
padding:0;
margin:0;
display:inline-block;
line-height:1;
text-transform:uppercase;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.hashtag a:hover{
color:#0399B5;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
/**/
.call-us{
position:relative;
display:block;
text-align:center;
margin:3em 0 0;
}
.call-us a{
color: rgb(3, 153, 181);
font-size: 3.1em;
font-family: 'Oswald';
font-weight: 500;
padding: 0;
margin: 0;
display: inline-block;
line-height: 1;
text-transform: uppercase;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.call-us a:hover{
color: #F39200;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
/**/
.social{
position:relative;
display:block;
text-align:center;
margin:3em 0 0;
}
.social a{
display:inline-block;
border:.3px solid #fff;
width:50px;
height:50px;
padding:15px;
border-radius:50%;
background-color5:transparent;
margin-right:30px;
background-size:65% 65%;
background-position:center center;
background-repeat:no-repeat;
opacity:.73;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.social a:hover{
background-color: rgba(9, 155, 183, 0.35);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
opacity:1;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.social a.fb{
background-image: url('./images/fb.png');
}
.social a.instagram{
background-image: url('./images/instagram.png');
}
.social a.youtube{
background-image: url('./images/youtube.png');
}
.social a.tiktok{
background-image: url('./images/tiktok.png');
}
.social a.telegram{
background-image: url('./images/telegram.png');
}
.social a:last-child{
margin-right:0px;
}
@media only screen and (min-width:1840px){
body{
font-size:21px;
}
.slogan {
width: 540px;
}
.circle {
width: 131px;
height: 131px;
font-size: 21px;
}
.bottom-text p {
font-size: 3.2em;
line-height: 1.3;
}
.vacancies-front h2 {
font-size: 3em;
line-height: 1.3;
margin: 0 0 2.4em;
}
.content-block-right.no-priority a{
font-size: 1.16em;
margin:25px 0;
}
.vacancies-front .row-title a {
font-size: 1.19em;
}
.block-title span.big {
font-size: 4.85em;
}
.content-block-right a {
font-size: 1.2em;
}
.content-block-right.priority img {
height: 205px;
margin: 0 0 25px;
}
.content-block-right.no-priority img {
height: 140px;
}
.content-block-right {
margin-bottom: 24px;
padding: 26px 5.5%;
margin-left: .7%;
}
.vacancies-front .bottom-button a {
padding: 19px 140px 20px;
display: inline-block;
border: 2.4px solid #0399B5;
background: transparent;
color: #000;
border-radius: 35px;
font-size: 1.05em;
letter-spacing: .05px;
display: inline-block;
box-shadow: 0 0 3.5px rgba(0,0,0,.15);
font-weight: 600;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.content-block-right.no-priority a.brigade-view,
.view-block a.brigade-view {
display: inline-block;
margin-top:25px;
padding: 19px 55px;
font-size: .85em;
border-radius: 30px;
background: #ebebeb;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.content-block-right.no-priority a.brigade-view:hover{
color:#fff;
background:#000;
box-shadow:0 0 5.5px rgba(0,0,0,.55);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
h3.stick-title {
font-size: 4em;
font-weight: 700;
line-height: 1.3;
font-family: Oswald !important;
margin: 20px 0px 1em;
padding: 20px 0px 0px;
}
.content-block-right.no-priority a {
display: block;
font-size: 1.17em;
font-weight: bold;
color: #000;
text-align: left;
}
.center-block span {
font-size: 3.2em;
line-height:1.23;
width:92%;
}
.center-block a {
color: #fff;
position: relative;
display: inline-block;
z-index: 9;
font-size: 1.05em;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 700;
margin: 4em 0 1em;
border-radius:55pz;
padding: 26.5px 144px 26.5px;
}
.yellow-btn {
margin: 4em 0 1em;
padding: 28px 134px 28px;
font-size: 1em;
}
.main-form form.webform-submission-form .js-form-item input[type="number"], .main-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 23.5px 13px 23.5px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size: 1.02em;
color: #0399B5;
letter-spacing: .3px;
font-family: 'UAFSans'!important;
}
.main-form form.webform-submission-form .js-form-item textarea {
border: 2.2px solid #2c2c2c;
padding: 23.5px 20px 23.5px;
font-size: 1.1em;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option {
width: 50px;
height: 50px;
padding: 11px;
font-size: .88em;
}
.main-form form.webform-submission-form input.webform-button--submit {
font-size: .95em;
width: 97%;
padding: 27.5px 0px 27.5px;
}
.main-faq h3 {
font-size: 3.87em;
}
.faq-title {
border: 1.85px solid #040404;
padding: 24px 45px;
font-size: 23px;
line-height: 31px;
background-position: 98% 50%;
background-size: 31px 31px;
}
.faq-content p {
margin: 0;
padding: 0;
font-size: 1.04em;
line-height: 1.45;
}
/**/
.center-logo{
top:13.5px;
}
.center-logo img {
width: 68px;
height: 68px;
margin-right: 10px;
}
.center-logo h1,.center-logo h2 {
font-size: .79em;
margin: 11px 0 0;
}
.navbar-toggle {
position: fixed;
top: 5.5%;
left: 50.5%;
width: 34px;
height: 34px;
background-color: #0399B5;
background-image: url('./images/menu-icon.png');
background-size: 57% 57%;
background-position: center center;
background-repeat: no-repeat;
padding: 13px;
}
.million-btn {
top: 1%;
right: 4%;
padding: 25px 124px 25px;
font-size: .8em;
letter-spacing: .15px;
}
.hero-section-title {
position: absolute;
display: block;
width: 90%;
left: 5%;
top: 60vh;
z-index: 12;
text-align: center;
}
.hero-section-title h1 {
font-size:90px;
margin: 0 0 30px;
}
.hero-section-title h4 {
font-size: 2.4em;
margin: 0px 0px 26px;
}
.sroll-section-text img {
height: 160px;
width: auto;
margin-bottom: 45px;
}
.sroll-section-text h2 {
font-size: 70px;
margin: 0 0 50px;
}
.promo-button {
padding: 21px 140px 21px;
margin-top: 2.5em;
}
.promo-right{
width: 47%;
margin: 0% 0 0 5%;
}
.promo-special-section .promo-left{
width: 35%;
margin: 0 0 0 11%;
}
.sticky-button-yellow {
position: fixed;
z-index: 999;
bottom: 5%;
transform: translate(-50%, 0)!important;
left: 50%!important;
padding: 25px 144px 25px;
background: #F39200;
color: #fff;
z-index: 12;
font-size: .95em;
font-weight: 600;
letter-spacing: .15px;
line-height: 1;
border-radius: 35px;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
opacity: 0;
}
.marine-corps-advantages img {
height: 140px;
width: auto;
display: block;
margin: 35px auto 19px;
}
.marine-corps-advantages h2 {
font-size: 82px;
line-height: 1.2;
margin: 0px 0px 1em;
}
.m-row-icon {
width: 130px;
height: 130px;
padding: 27px;
}
video {
max-height: 610px;
}
.commander h3 {
font-size: 120px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #0399B5;
margin: 0px 0 .15em;
}
.commander h2 {
font-size: 40px;
font-weight: bold!important;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #222123;
margin: 0px 0 .35em;
}
.call-sign {
font-size: 1.53em;
}
.play {
display: inline-block;
border: .5px solid #fff;
position: absolute;
bottom: 18px;
left: 11px;
width: 60px;
height: 60px;
padding: 12px;
}
.play span {
font-size: 13px;
}
.brigade-overview p,
.unit-traditions p,
.unit-weaponry p {
font-size: 20px;
line-height: 31px;
margin-bottom: 22px;
}
.hashtag a{
font-size:5em;
}
/**/
.hello-brigade{
height:85vh;
}
.brigade-name h1 {
position: relative;
font-size: 68px;
font-weight: 700;
line-height: 1.3;
color: rgb(255, 255, 255);
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
margin: 0px 0px 35px;
}
.corp-icon img {
display: block;
max-width: 70px;
height: auto;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.corp-title {
font-size: 17px;
color: #fff;
width: 120px;
margin-left: -4px;
text-align: left;
border: 0px solid red;
}
.brigade-vacancies {
position: relative;
padding: 27px 100px 27px;
display: inline-block;
border: 2.4px solid #0399B5;
background: transparent;
color: #fff;
border-radius: 45px;
font-size: .9em;
margin-right: 3em;
}
.unit-vacancies-block .vacancie-row .bottom-go {
position: absolute;
bottom: 42px;
right: 47px;
width: 35px;
height: 35px;
display: block;
background-image: url("./images/btn-arrow-vacancie.png");
background-size: 25px 25px;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.brigade-social a {
display: inline-block;
border: .5px solid #fff;
width: 55px;
height: 55px;
padding: 7px;
}
.motto .line span {
padding-right: 2.5em;
color: #fff;
font-size: 18.5px;
}
.one-year {
height: 870px;
}
.one-info h2 {
font-size: 90px;
margin: 0 0 45px;
}
.yellow-btn {
margin: 4em 0 1em;
padding: 25px 124px 25px;
font-size: .92em;
}
.scrolling-header span {
font-size: 7.85em;
}
.application-form form.webform-submission-form .js-form-item input[type="number"], .application-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 17.5px 13px 18px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size: .95em;
color: #000;
letter-spacing: .3px;
font-family: 'UAFSans'!important;
}
.application-form form.webform-submission-form input.webform-button--submit {
font-size: .92em;
margin: 1em 0 0em;
padding: 24px 0px 24px;
border-radius: 45px;
}
.application-form form.webform-submission-form .js-form-item textarea {
border: 2.2px solid #2c2c2c;
padding: 17.5px 20px 18.5px;
width: 94.5%;
max-width: 94.5%;
min-width: 94.5%;
height: 110px;
min-height: 110px;
max-height: 162px;
font-size: .95em;
color: #000;
font-family: 'UAFSans'!important;
background: rgba(255,255,255,.19);
margin-top: 2px;
}
}
@media only screen and (min-width:2400px){
body{
font-size:25px;
}
/**/
.slogan {
width: 740px;
top:37vh;
}
.circle {
width: 181px;
height: 181px;
font-size: 27px;
top:77vh;
}
.bottom-text p {
font-size: 3.7em;
line-height: 1.3;
}
.vacancies-front h2 {
font-size: 3em;
line-height: 1.3;
margin: 0 0 2.4em;
}
.content-block-right.no-priority a{
font-size: 1.5em;
margin:25px 0;
}
.vacancies-front .row-title a {
font-size: 1.23em;
}
.vacancies-front .bottom-button a {
padding: 25px 180px 25px;
display: inline-block;
border: 2.4px solid #0399B5;
background: transparent;
color: #000;
border-radius: 65px;
font-size: 1.3em;
letter-spacing: .05px;
display: inline-block;
box-shadow: 0 0 3.5px rgba(0,0,0,.15);
font-weight: 600;
-webkit-transition: all .35s ease;
-moz-transition: all .35 ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.block-title span.big {
font-size: 5.55em;
}
.content-block-right a {
font-size: 1.75em;
}
.content-block-right.priority img {
height: 305px;
margin: 0 0 25px;
}
.content-block-right.no-priority img {
height: 210px;
}
.content-block-right {
margin-bottom: 24px;
padding: 26px 5%;
margin-left: .7%;
}
.content-block-right.no-priority a.brigade-view,
.view-block a.brigade-view {
display: inline-block;
margin-top:31px;
padding: 27px 115px;
font-size: 1.05em;
border-radius: 60px;
background: #ebebeb;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.content-block-right.no-priority a.brigade-view:hover{
color:#fff;
background:#000;
box-shadow:0 0 5.5px rgba(0,0,0,.55);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.content-block-right.priority p{
font-size:1.075em;
font-weight:400;
line-height:1.4;
font-family: 'UAFSans';
}
.content-block-right.no-priority p{
font-size:1em;
font-weight:400;
line-height:1.4;
font-family: 'UAFSans';
}
h3.stick-title {
font-size: 4em;
font-weight: 700;
line-height: 1.3;
font-family: Oswald !important;
margin: 20px 0px 1em;
padding: 20px 0px 0px;
}
.content-block-right.no-priority a {
display: block;
font-size: 1.37em;
font-weight: bold;
color: #000;
text-align: left;
}
.center-block span {
font-size: 3.7em;
line-height:1.23;
width:92%;
}
.center-block a {
color: #fff;
position: relative;
display: inline-block;
z-index: 9;
font-size: 1.25em;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 700;
margin: 4em 0 1em;
border-radius:85px;
padding: 33.5px 184px 33.5px;
}
.yellow-btn {
margin: 4em 0 1em;
padding: 33px 134px 33px;
font-size: 1.2em;
border-radius:85px;
}
.main-form form.webform-submission-form .js-form-item input[type="number"], .main-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 27.5px 13px 27.5px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size: 1.1em;
color: #0399B5;
letter-spacing: .3px;
font-family: 'UAFSans'!important;
}
.main-form form.webform-submission-form .js-form-item textarea {
border: 2.2px solid #2c2c2c;
padding: 27.5px 20px 27.5px;
font-size: 1.1em;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option {
width: 50px;
height: 50px;
padding: 11px;
font-size: .99em;
}
.main-form form.webform-submission-form input.webform-button--submit {
font-size: 1.15em;
width: 97%;
border-radius:85px;
padding: 37.5px 0px 37.5px;
}
.main-faq h3 {
font-size: 4em;
}
.faq-title {
border: 1.85px solid #040404;
padding: 31px 45px;
font-size: 30px;
line-height: 45px;
background-position: 98% 50%;
background-size: 40px 40px!important;
}
.faq-content p {
margin: 0;
padding: 0;
font-size: 1.2em;
line-height: 1.45;
}
.one-year{
position:relative;
width:100%;
max-width:100%;
overflow:hidden;
height:1200px;
overflow:hidden;
margin:4em 0 0em;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url('/themes/uanavy/images/18-24.jpg')
}
.one-info h2 {
font-family: 'Oswald' !important;
font-size: 6em;
font-weight: 700;
line-height: 1.3;
padding: 0;
margin: 0 0 45px;
position: relative;
display: block;
color: #fff;
text-transform: uppercase;
}
.one-info p {
color: #fff;
width: 75%;
display: block;
margin: 0 auto;
font-size: 1.25em;
font-weight: 400;
line-height: 1.4;
font-family: 'UAFSans';
}
.navbar-toggle {
position: fixed;
top: 5%;
left: 50%;
width: 51px;
height: 51px;
background-color: #0399B5;
background-image: url('./images/menu-icon.png');
background-size: 57% 57%;
background-position: center center;
background-repeat: no-repeat;
padding: 22px;
}
nav.website-menu .navi li a {
font-size: 3.5em;
}
nav.website-menu ul li {
margin-bottom:1.15em;
}
/**/
.center-logo{
top:20px;
}
.center-logo img {
width: 78px;
height: 78px;
margin-right: 10px;
}
.center-logo h1,.center-logo h2 {
font-size: .79em;
margin: 11px 0 0;
}
.special-hero-section{
height:180vh;
max-height:180vh;
}
.million-btn {
top: .87%;
right: 4%;
padding: 35.5px 164px 35px;
font-size: 1em;
letter-spacing: .15px;
border-radius: 45px;
}
.hero-section-title {
position: absolute;
display: block;
width: 90%;
left: 5%;
top: 65vh;
z-index: 12;
text-align: center;
}
.hero-section-title h1 {
font-size:130px;
margin: 0 0 30px;
}
.hero-section-title h4 {
font-size: 2.6em;
margin: 0px 0px 26px;
}
.sroll-section-text img {
height: 190px;
width: auto;
margin-bottom: 45px;
}
.sroll-section-text h2 {
font-size: 90px;
margin: 0 0 80px;
}
.promo-special-section {
width: 90%;
padding: 7% 5%;
}
.promo-button {
padding: 33px 180px 33px;
border-radius:50px;
margin-top: 2.7em;
font-size: 1em;
margin:23px 0;
}
.promo-right{
width: 47%;
margin: 0% 0 0 5%;
}
.promo-special-section .promo-left{
width: 35%;
margin: 0 0 0 11%;
}
.sticky-button-yellow {
position: fixed;
z-index: 999;
bottom: 5%;
transform: translate(-50%, 0)!important;
left: 50%!important;
padding: 38px 194px 38px;
background: #F39200;
color: #fff;
z-index: 12;
font-size: 1.07em;
font-weight: 600;
letter-spacing: .15px;
line-height: 1;
border-radius: 45px;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
opacity: 0;
}
.marine-corps-advantages img {
height: 160px;
width: auto;
display: block;
margin: 35px auto 35px;
}
.marine-corps-advantages h2 {
font-size: 112px;
line-height: 1.2;
margin: 0px 0px 1em;
}
.m-row-icon {
width: 140px;
height: 140px;
padding: 35px;
}
.m-row span {
margin: 35px 0px 20px;
font-size:2em;
}
.m-row p {
font-size: 1em;
color: #1c1c1c;
line-height: 1.58;
margin-top: 30px;
text-align: center;
}
video {
max-height: 850px;
}
.commander {
width: 91%;
margin: 11em auto 0;
}
.commander h3 {
font-size: 190px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #0399B5;
margin: 0px 0 20px;
}
.commander h2 {
font-size: 60px;
font-weight: bold!important;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #222123;
margin: 0px 0 80px;
}
.call-sign {
font-size: 2em;
}
.play {
display: inline-block;
border: .5px solid #fff;
position: absolute;
bottom: 25px;
left: 14px;
width: 75px;
height: 75px;
padding: 20px;
}
.commanders-row-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
width: 100%;
margin: 70px 0 0;
}
.command-position {
position: relative;
display: block;
text-align: left;
color: #0399B5;
font-family: 'Oswald';
font-size: 1.35em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .15px;
margin: 24px 0 12px;
}
.commanders-row p {
font-size: 1.07em;
line-height: 1.45;
color: #222123;
}
.play span {
font-size: 16px;
}
.unit-traditions,
.unit-weaponry {
position: relative;
display: block;
width: 91%;
margin: 8em auto 0;
}
.unit-traditions h3,
.unit-weaponry h3 {
font-size: 130px;
font-weight: 700;
line-height: 1.2;
font-family: Oswald !important;
padding: 0px;
color: #0399B5;
margin: 0px 0 45px;
padding-bottom: 28px;
text-transform: uppercase;
}
.brigade-overview p,
.unit-traditions p,
.unit-weaponry p {
font-size: 28px;
line-height: 42px;
margin-bottom: 50px;
}
#footer{
position:relative;
display:block;
padding:200px 0;
background:#222123;
margin:13em 0 0;
box-shadow:0 0 5px #222123;
}
.hashtag a{
font-size:6.25em;
}
.social{
position:relative;
display:block;
text-align:center;
margin:110px 0 0;
}
.social a{
display:inline-block;
border:.3px solid #fff;
width:90px;
height:90px;
padding:31px;
border-radius:50%;
background-color5:transparent;
margin-right:41px;
background-size:65% 65%;
background-position:center center;
background-repeat:no-repeat;
opacity:.73;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
}
@media only screen and (max-width:1490px){
.circle {
top:77vh;
right:5.5%;
}
.positions-facets {
position: relative;
display: block;
width: 93%;
margin: 3em auto;
}
.navy-positions {
position: relative;
display: block;
width: 93%;
margin: 4em auto 0;
}
.brigade-head {
width: 88.3%;
position: relative;
display: block;
margin: 2em auto 0;
padding: 0;
height: 460px;
overflow: hidden;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: rgba(0, 0, 0, 0.17) 0px 0px 12.5px;
}
.motto-vacancie-page {
overflow: hidden;
width: 88.3%;
position: relative;
display: block;
margin: 0 auto 0;
z-index: 10;
}
.vacancies-body {
width: 81%;
padding: 3% 3%;
}
}
@media only screen and (max-width:1400px){
body{
font-size:14.5px;
}
.circle {
width: 101px;
height: 101px;
top:77vh;
right:5.5%;
}
.vacancies-front .row-title a {
font-weight: bold;
font-size: 1.15em;
}
.content-block-right.priority img {
height: 145px;
width: auto;
margin: 0 0 15px;
display: block;
}
.hello-chevrons img {
height: 260px;
width: auto;
display: inline-block;
}
}
@media only screen and (max-width:1180px) and (min-width: 701px){
/**/
.first-article {
flex-direction: column;
align-items: flex-start;
padding:2%;
height: auto;
}
.text-article h2 {
font-size: 1.85em;
margin-bottom: 1.25em;
color: #000;
}
.first-article-info {
position: static;
transform: none;
width: 95%;
height: auto;
padding:10% 0 10% 5%;
background-color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
}
.text-article p {
font-size: 1em;
color: #333;
line-height: 1.5;
text-align: left;
display:block;
width:97%;
}
.first-article-banner {
width: 100%;
margin: 0;
}
.first-article-banner img {
width: 100%;
height: auto;
max-width: 100%;
min-height: auto !important;
object-fit: cover;
margin-bottom:1%;
}
.all-article {
width: 95%;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin: 0 auto;
}
.blog-page-head {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2%;
width: 94%;
height: auto;
margin:2em auto 0;
background-color: #222123;
}
/* БАНЕР */
.blog-banner {
width: 100%;
margin: 0 0 2%;
}
.blog-banner img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
margin-bottom: 1%;
display: block;
}
/* ІНФОБЛОК */
.blog-page-info {
position: static;
width: 92%;
height: auto;
padding: 10% 3% 10% 5%;
background-color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin-bottom: 0px;
}
/* ТЕКСТ */
.blog-page-info h1 {
font-size: 2.35em;
margin:0em;
color: #000;
line-height: 1.3;
}
/* Додатково — щоб виглядало як .first-article */
.blog-page-head .views-field-field-blog-banner,
.blog-page-head .field-content {
width: 100%;
}
.body-text {
width: 88%;
margin: 2em auto 0;
position: relative;
padding: 3% 4%;
background: #fff;
}
.body-text p {
font-size: 1.05em;
line-height: 1.5;
margin: 0 0 25px;
}
.body-text img {
height: auto;
max-width: 100%;
width:98%;
min-width:98%;
margin:0 0;
display:block;
}
.body-text .media-embed-resized{
height: auto;
max-width: 100%;
width:100%;
min-width:100%;
margin:0 0;
display:block;
}
.related-section {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.related-section .views-row {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
box-sizing: border-box;
}
/* приховати третій і далі */
.related-section .views-row:nth-child(n+3) {
display: none;
}
.related-section .views-row a {
font-size: 1.2em;
line-height: 1.2;
color: #222123;
padding: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
/**/
body{
font-size:17.6px;
position:relative;
display:block;
overflow-x:hidden;
width:100vw;
max-width:100vw;
padding:0;
margin:0;
}
.navbar-toggle, .web-animate{display:none;}
.horizontal-divice{display:none!important;}
.vertical-divice{display:inline-block;}
.center-logo {
top: 20px;
left: 3%;
}
.center-logo img {
width: 63px;
height: 63px;
margin-right: 15px;
display: inline-block;
}
.center-logo h1, .center-logo h2 {
color: #fff;
font-size: .87em;
margin: 9px 0 0;
line-height: 1.43;
}
/*Mobile Menu*/
.menu-overlay {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
align-items: center; /* Центрує по горизонталі */
justify-content: center; /* Центрує по вертикалі */
z-index: 9999;
padding: 20px;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
visibility: hidden;
pointer-events: none;
}
.menu-overlay.active {
transform: scaleY(1);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#main-menu {
display: none;
}
.menu-close-button {
font-size: 35px;
font-weight: 700;
background: transparent;
border: none;
color: #000;
cursor: pointer;
position: fixed; /* Використовуємо fixed, щоб фіксувати в куті */
top: 29px; /* Відступ зверху */
right: 5.5%; /* Відступ з правого боку */
z-index: 10000; /* Збільшуємо z-index для того, щоб кнопка була поверх інших елементів */
}
.menu-header {
display: none;
justify-content: space-between;
align-items: center;
margin:10px 0 0px;
position: relative;
background:transparent;
padding:0;
font-family: 'UAFSans';
}
.menu-header.show {
display:block;
width:100%;
text-align:center;
}
#menu-title{
font-size:1.7em;
color:#fff;
font-family: 'UAFSans';
font-weight:600;
padding:27px 0;
width:100%;
display:inline-block;
text-align:center;
background:rgba(3, 153, 181,1);
}
.menu-title.main-title {
font-family: 'UAFSans';
display: flex;
align-items: center;
padding: 31px 20px;
width: 93%;
margin-left:.5%;
background: #F8F8F8;
font-size: 1.85em;
font-weight: 600;
color: #000;
text-align: left;
}
.menu-title.main-title img {
width: 55px;
height: 55px;
margin-right: 10px;
flex-shrink: 0;
}
.menu-title.main-title p {
margin: 0;
font-family: 'UAFSans';
padding: 0;
font-size: 0.85em;
font-weight: 500;
text-transform: uppercase;
line-height:1;
}
.back-link{
display:inline-block;
margin:10px auto 0%!important;
background:#F8F8F8;
padding:20px 46px;
color:#000;
font-size:.95;
font-weight:bold;
font-family: 'UAFSans';
float:right;
text-transform:uppercase;
}
#menu-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 20px;
font-family: 'UAFSans';
align-items: flex-start; /* Центрує пункти меню по горизонталі */
justify-content: flex-start;
margin-top:5%;
width: 100%;
overflow-x:auto;
max-width: 90%;
}
.menu-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
font-size: 1.39em;
cursor: pointer;
position: relative;
border-bottom:1.35px solid rgba(30,30,30,.08);
display: block;
justify-content: center;
text-align: left;
font-family: 'UAFSans';
padding:24px 1% 24px;
line-height:1;
width:97%;
font-weight:normal;
}
.menu-item.has-image{
padding-left:12%;
width:85.5%
}
.menu-item.show {
opacity: 1;
transform: translateY(0);
}
/* Оновлений стиль для пунктів меню з фото чи підменю */
.menu-item img, .submenu-toggle {
margin-right: 10px; /* Додаємо відступ, якщо є фото чи кнопка */
}
.menu-item img {
width: auto;
height: 64px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.menu-item.has-image,
.menu-item.has-submenu {
justify-content: center;
}
/* Активуємо анімацію поступово */
.menu-item.show {
opacity: 1;
transform: translateY(0);
}
.submenu-toggle {
border-radius: 50%;
padding: 0px;
font-weight: bold;
position: absolute;
top:10%;
font-size:2.5em;
font-weight:200;
color:#0399B5;
right: 0px;
}
#menu-toggle {
position: fixed;
top: 20px;
right:3%;
width: 64px;
height: 64px;
background-color: #0399B5;
background-image: url('./images/menu-icon.png');
background-size: 60% 60%;
background-position: center center;
background-repeat: no-repeat;
padding: 10px;
border-radius: 50%;
z-index: 991;
cursor: pointer;
display:inline-block;
border:none;
color:transparent;
}
#menu-toggle:hover{
background-color:#222123;
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
/***********/
.slogan {
position: absolute;
width: 52%;
height: auto;
display: block;
left: 2.5%;
top: 33vh;
z-index: 9;
color: #fff;
text-align: center;
}
.circle {
width: 131px;
height: 131px;
top: 79vh;
right: 6.5%;
}
.bottom-text {
width:93%;
left:2.5%;
bottom: 9%;
}
.full-ver{
display:none;
}
.mobile-ver{
display:block;
}
.bottom-text p {
font-size: 3.5em;
line-height: 1.36;
}
/**/
.vacancies-front h2 {
font-size: 49px;
margin: 0 0 2.8em;
}
.vacancies-front .row-title a {
font-weight: bold;
font-size: 1.43em;
}
.vacancies-front .bottom-button {
margin: 3em auto 4.5em;
width: 93%;
text-align: center;
}
.vacancies-front .bottom-button a {
padding: 25px 150px 26px;
display: inline-block;
border: 2.4px solid #0399B5;
background: transparent;
color: #000;
border-radius: 35px;
font-size: 1.2em;
}
/**/
.main-form .webform-title span {
font-size: 7.95em;
}
.main-form .main-form-block {
position: relative;
display: block;
margin: 0 auto 3em;
width: 85%;
padding: 4.25% 5%;
background: #fff;
/* border-radius: 6px; */
border: 2.5px solid #0399B5;
z-index: 9;
box-shadow: 0 0 12.5px rgba(0,0,0,.13);
}
.form-description p {
font-size: 1.33em;
line-height: 1.55;
padding-bottom: 25px;
margin-bottom: 45px;
border-bottom: 2px solid rgba(0,0,0,.25);
}
.main-form form.webform-submission-form .js-form-item input[type="number"], .main-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 17.5px 11px 18.5px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size: 1.25em;
color: #0399B5;
letter-spacing: .3px;
font-family: 'UAFSans' !important;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item span{
font-size:1.25em;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
padding: 5px;
font-size: 1.2em;
line-height:1;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
color: #0399B5;
transition: all 0.3s ease;
}
.main-form form.webform-submission-form .js-form-item textarea {
border: 2.2px solid #2c2c2c;
padding: 17.5px 11px 18.5px;
width: 94.5%;
max-width: 94.5%;
min-width: 94.5%;
height: 170px;
min-height: 170px;
max-height: 222px;
font-size:1.25em;
color: #000;
font-family: 'UAFSans' !important;
background: rgba(255,255,255,.19);
margin-top: 2px;
}
.main-form form.webform-submission-form input.webform-button--submit {
width: 98%;
font-size: 1.4em;
margin: 2em 0 1em;
padding: 25.5px 0px 25.5px;
font-family: 'Oswald';
}
/***/
.main-faq {
width: 95%;
}
.faq-sec {
position: relative;
display: block;
width: 95%;
margin: 3em auto 0em;
}
.faq-title {
border: 1.85px solid #040404;
padding: 20px 45px;
font-size:1.3em;
background: #fff;
font-weight: 500;
line-height: 25px;
letter-spacing: 0em;
text-align: left;
background-image: url(./images/plus_icon.png);
background-repeat: no-repeat;
background-position: 98% 50%;
background-size: 31px 31px;
cursor: pointer;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.faq-content li {
margin-bottom: 17px;
font-size: 1.2em;
}
.faq-content p {
margin: 0;
padding: 0;
font-size: 1.2em;
line-height: 1.45;
}
.faq-content li p{
font-size: 1em;
}
/*****************/
.brigade-name {
position: absolute;
left: 5%;
top:auto;
bottom:5%;
width: 90%;
transform: translate(-2.5%, -0%);
z-index: 9;
}
.hello-chevrons {
position: absolute;
top:47%;
z-index: 9;
display: block;
transform: translate(0, -50%);
right: auto;
left:2.5%;
border: 0px solid green;
}
.hello-chevrons img {
height: 222px;
width: auto;
display: inline-block;
}
.brigade-name h1 {
font-size: 45px;
margin: 0px 0 35px;
}
.brigade-social{display:none}
.brigade-vacancies {
padding: 20px 80px 20px;
border: 2.4px solid #0399B5;
border-radius: 35px;
font-size: 1.1em;
margin-right: 3em;
line-height: 1;
}
.corp-icon img {
max-width: 50px;
}
.corp-title {
font-size: 16.5px;
font-weight: 500;
line-height: 1.2;
text-transform: capitalize;
color: #fff;
width: 100px;
margin-left: -4px;
}
.brigade-social a.fb {
margin-right: 15px;
}
.brigade-overview {
position: relative;
padding: 6% 3.5% 2%;
text-align: left;
display: block;
background: #F8F8F8;
}
.brigade-overview p {
font-size: 18.5px;
line-height: 29.8px;
margin-bottom: 20px;
}
.commander {
position: relative;
display: none;
width: 95%;
margin: 8em auto 0;
}
.call-sign {
position: relative;
display: block;
text-align: left;
color: #222123;
font-family: 'Oswald';
font-size: 1.55em;
font-weight: 800;
}
.commanders-row p {
font-size: .93em;
line-height: 1.45;
color: #222123;
}
.one-info h2 {
font-family: 'Oswald' !important;
font-size: 80px;
line-height: 1.3;
margin: 0 auto 15px;
width:90%;
}
.one-info p {
width: 90%;
font-size: 1.15em;
}
.unit-vacancies-block .vacancie-row {
position: relative;
display: inline-block;
margin: 0 auto 2.5%;
padding: 1.5%;
border: 2.5px solid #0399B5;
width: 94%;
vertical-align: top;
}
.unit-gallery {
position: relative;
display: block;
margin: 5em auto 0;
width:95%;
border: 0px solid red;
}
.unit-traditions,.unit-weaponry {
position: relative;
display: block;
width: 95%;
margin: 5em auto 0;
}
.unit-weaponry p ,
.unit-traditions p {
font-size: 18.5px;
line-height: 29.8px;
margin-bottom: 20px;
}
.brigade-application-form {
position: relative;
display: block;
overflow: hidden;
width: 95%;
margin: 9em auto 0;
}
.join-us {
position: relative;
display: block;
width: 100%;
margin:0% auto 2em;
}
.application-form {
display: block;
width: 70%;
padding:5% 2.5%;
margin:4% auto 0;
}
.main-form form.webform-submission-form .js-form-item:nth-child(2n) ,
.application-form form.webform-submission-form .js-form-item:nth-child(2n) {
width:95%;
display:block;
margin: 0 auto 1.5em;
text-align:center;
}
.main-form form.webform-submission-form .js-form-item ,
.application-form form.webform-submission-form .js-form-item {
width:95%;
display:block;
margin: 0 auto 1.5em;
text-align:center;
}
.main-form form.webform-submission-form .js-form-item,
.application-form form.webform-submission-form .js-form-item {
width:95%;
display:block;
margin: 0 auto 1.5em;
text-align:center;
}
.application-form form.webform-submission-form .js-form-item input[type="number"], .application-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 17.5px 13px 18.5px;
background: transparent;
width: 94%;
margin-top: 6px;
font-size: 1.1em;
color: #000;
letter-spacing: .3px;
font-family: 'UAFSans' !important;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item,
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item {
width: 95%;
display: block;
margin: 25px auto 2.5% !important;
margin-right: 0px;
text-align: left;
padding: 2% 0;
border: none;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item span,
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item span {
font-size: 1.25em;
margin-top:15px;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option,
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
padding: 5px;
margin:15px 0;
font-size: 1.2em;
line-height: 1;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
color: #0399B5;
transition: all 0.3s ease;
}
.main-form form.webform-submission-form .js-form-item.js-form-type-textarea,
.application-form form.webform-submission-form .js-form-item.js-form-type-textarea {
width: 95%;
display: block;
margin: 0% auto 2em!important;
text-align:center;
}
.main-form form.webform-submission-form .js-form-item textarea ,
.application-form form.webform-submission-form .js-form-item textarea {
padding: 17.5px 13px 18.5px;
font-size: 1.1em;
}
.main-form form.webform-submission-form input.webform-button--submit ,
.application-form form.webform-submission-form input.webform-button--submit {
width: 95%;
display: block;
font-size:1.1em;
margin: 1em auto 0em;
padding: 24.5px 0px 24.5px;
font-family: 'Oswald' !important;
}
.sticky-button-yellow {
padding: 26.5px 0px 26.5px;
font-size: 1.35em;
display:block;
border-radius:45px;
width:56%;
text-align:center;
}
.application-chevrons {
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -80%);
opacity: 0.065;
width: 100%;
text-align: center;
}
.join-us h4 {
font-size: 4.2em;
line-height: 1.2;
margin: 0px 0 15px;
}
.join-us p {
font-size: 1.2em;
line-height: 1.4;
margin-bottom: 25px;
color: #000;
}
.brigade-block {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
position: absolute;
width: 100%;
}
.brigade-block.active {
opacity: 1;
visibility: visible;
position: static;
}
.brigades-toggle {
display: flex;
flex-direction: column;
gap: 18px;
margin:8em 0 40px;
}
.brigades-toggle .block-title {
position: relative;
display: block;
text-align: center;
margin-bottom:-29px;
}
.brigades-toggle span.radio-info{
font-size: 2.95em;
font-weight: 700;
line-height: 1.3;
font-family: Oswald !important;
text-transform: uppercase;
padding: 0;
letter-spacing:0;
margin: 10px auto 20px;
width: 97%;
text-align: center;
display: block;
color: #000;
}
.block-title span.big {
font-size: 5.9em;
}
.brigades-toggle label {
display: flex;
align-items: center;
background: #fff;
padding:20px 14px;
width:85.5%;
margin:0 auto;
cursor: pointer;
position: relative;
user-select: none;
box-shadow:0 0 3.5px rgba(0,0,0,.15);
}
.brigades-toggle input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 30px;
height: 30px;
border: 2.5px solid #222123;
border-radius: 50%;
margin-right: 7px;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.brigades-toggle input[type="radio"]::before {
content: "";
width: 45%;
height: 45%;
background-color: #0399B5;
border-radius: 50%;
transform: scale(0);
transition: transform 0.2s ease-in-out;
}
.brigades-toggle input[type="radio"]:checked::before {
transform: scale(1);
}
.brigades-toggle label img {
width: 73px!important;
height: 73px!important;
margin:0 10px;
}
.brigades-toggle span {
font-size:1.6em;
font-weight:bold;
color: #222123;
line-height:1;
padding-left:8px;
transition: transform 0.2s ease-in-out;
}
.brigades-toggle input[type="radio"]:checked ~ span{
color: #F39200;
transition: transform 0.2s ease-in-out;
}
.mobile-brigades-baner{
position:relative;
display:block;
margin-bottom:25px;
}
.mobile-brigades-baner img{
width:89%;
height:auto;
margin:.5em auto 1em;
display:none;
border-radius:21px;
border:3.5px solid #0399B5;
}
.mobile-brigades-baner span{
color:#0399B5;
text-transform:uppercase;
font-size:3.4em;
display:block;
line-height:1.2;
font-weight:bold;
width:95%;
text-align:center;
margin:40px auto 65px;
font-family: 'Oswald' !important;
}
.mobile-brigades{
display:block;
background:#222123;
/*background:#e8e8e8;*/
padding:5% 0%;
margin:0 auto;
max-width:100%;
overflow:hidden;
}
.mobile-brigades-row{
display:block;
width:85%;
margin:0 auto 1.25em;
border-bottom:1.65px solid rgba(255,255,255,.35);
text-align:left;
padding:3% .25% 4.5%;
overflow:hidden;
/*background:rgba(255,255,255,.45);*/
}
.mobile-brigades-row:last-child{
border-bottom:0px solid rgba(255,255,255,.35);
}
.mobile-brigades-row img{
display:block;
width:30.5%;
height:auto;
margin:0 0 1.65em;
}
.mobile-brigades-row a{
font-size:1.73em;
color:#fff;
margin:2.5em 0 4em;
font-weight:700;
}
.mobile-brigades-row .view-block{
position:relative;
display:block;
text-align:right;
width:100%;
padding:20px 0;
}
.mobile-brigades-row .view-block a.brigade-view{
display:inline-block;
padding:23px 62px;
margin:2.5em 0 .5em;
font-size:1.2em;
border-radius:30px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
color:#000;
box-shadow:0 0 6px #000;
}
.mobile-brigades-row .view-block a.brigade-view:hover{
color:#fff;
background:#000;
box-shadow:0 0 5.5px rgba(0,0,0,.55);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.military-branch-body .views-row {
display: inline-block;
text-align: center;
width: 44%;
vertical-align: top;
margin: 0 0 3%;
padding:3.5% 1.5%;
background-color: #f2f2f2;
border: 2.5px solid transparent;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.military-branch-body .views-row:nth-of-type(3n+2) {
margin: 0 0 3%;
}
.military-branch-body .views-row:nth-of-type(odd) {
margin: 0 4% 2% 0!important;
}
.military-branch-body .views-row img {
width: 40%;
margin: 0 auto 35px;
}
.military-branch-body .views-row a {
font-size: 1.3em;
}
/***/
.brigade-head {
width: 95.3%;
position: relative;
display: block;
margin: 2em auto 0;
padding: 0;
height: 420px;
}
.motto-vacancie-page {
overflow: hidden;
width: 95.3%;
position: relative;
display: block;
margin: 0 auto 0;
z-index: 10;
}
.vacancies-body {
width: 86.5%;
padding: 3% 3%;
}
.go-vacancie-btn {
position: absolute;
top: 21px;
right: 14.5%;
padding: 17px 60px 17px;
font-size: .82em;
}
.benefits span {
display: inline-block;
padding: 17px 14px;
color: #000;
font-size: 16.5px;
line-height: 1;
font-weight: 400;
margin: 0 10px 10px 0;
position: relative;
background: rgba(0,0,0,.041);
}
.field-label {
position: relative;
display: block;
font-size: 1.27em;
font-weight: 600;
color: #0399B5;
border-bottom: 1.85px solid #0399B5;
padding: 0 0 5px;
margin-bottom: 30px;
}
.vacancies-body p {
font-size: 1em;
line-height: 1.53;
color: #000;
margin-bottom: 25px;
}
.vacancy-application-title {
position: relative;
display: block;
text-align: center;
width: 97%;
margin: 15px auto 15px;
padding: 25px 0;
background: rgba(3, 153, 181,.06);
}
.vacancy-form {
position: relative;
display: block;
width: 97%;
margin: 0 auto;
padding: 3% 0%;
}
.vacancy-application-title span.vacancies-label {
display: inline-block;
color: #000;
font-size: 1.05em;
line-height: 1;
margin-right: 5px;
font-weight: 100;
}
.vacancy-application-title span {
display: inline-block;
color: #000;
font-size: 1.23em;
line-height: 1;
font-weight: 500;
}
}
@media only screen and (max-width:700px){
.first-article {
flex-direction: column;
align-items: flex-start;
padding:2%;
height: auto;
}
.text-article h2 {
font-size: 1.85em;
margin-bottom: 1.25em;
color: #000;
}
.first-article-info {
position: static;
transform: none;
width: 95%;
height: auto;
padding:10% 0 10% 5%;
background-color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
}
.text-article p {
font-size: 1em;
color: #333;
line-height: 1.5;
text-align: left;
display:block;
width:97%;
}
.first-article-banner {
width: 100%;
margin: 0;
}
.first-article-banner img {
width: 100%;
height: auto;
max-width: 100%;
min-height: auto !important;
object-fit: cover;
margin-bottom:1%;
}
.all-article {
width: 95%;
grid-template-columns: repeat(1, 1fr);
gap: 18px;
margin: 0 auto;
}
.blog-page-head {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2%;
width: 94%;
height: auto;
margin:2em auto 0;
background-color: #222123;
}
.article-priority {
display: inline-block;
font-weight: 800;
text-transform: uppercase;
background: #0399B5;
padding: 12px 21.5px;
color: #fff;
font-size: .9em;
position: absolute;
top: 5%;
left: 0;
z-index: 10;
}
.all-article .views-field-title a {
display: block;
padding: 15px 10px 3px;
font-size: 1.1em;
font-weight: bold;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.all-article .views-field-body .field-content p {
margin: 0px 0 10px;
font-size: .97em;
line-height: 1.35;
}
/* БАНЕР */
.blog-banner {
width: 100%;
order: 2;
margin: 0 0 2%;
}
.blog-banner img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
margin-bottom: 0%;
display: block;
}
.blog-page-info {
position: static;
width: 92%;
order: 1;
margin-bottom: 1%;
height: auto;
padding: 10% 3% 10% 5%;
background-color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin-bottom: 15px;
}
.blog-page-info h1 {
font-size:2.4em;
margin:0em;
padding:15px 0 25px;
color: #000;
line-height: 1.15;
font-weight:800;
}
.blog-page-head .views-field-field-blog-banner,
.blog-page-head .field-content {
width: 100%;
}
.body-text {
width: 89%;
margin: 2em auto 0;
position: relative;
padding: 3% 4%;
background: #fff;
}
.body-text p {
font-size: 1.05em;
line-height: 1.4;
margin: 0 0 25px;
}
.body-text img {
height: auto;
max-width: 100%;
width:98%;
min-width:98%;
margin:0 0;
display:block;
}
.body-text .media-embed-resized{
height: auto;
max-width: 100%;
width:100%;
min-width:100%;
margin:0 0;
display:block;
}
h2.related-blog-title {
font-size: 1.5em;
font-weight: 600;
color: #0399B5;
}
.related-section {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.related-section .views-row {
flex: 1 1 calc(100% - 0px);
max-width: calc(100% - 0px);
box-sizing: border-box;
}
/* приховати третій і далі */
.related-section .views-row:nth-child(n+3) {
display: block;
}
.related-section .views-row a {
font-size: 1.2em;
line-height: 1.2;
color: #222123;
padding: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.body-text blockquote {
padding: 33px 15px;
font-size: .92em;
border-top: 1.5px solid #0399B5;
border-bottom: 1.5px solid #0399B5;
}
.body-text p {
font-size: 1.1em;
line-height: 1.4;
margin: 0 0 25px;
}
/**/
.modal-million form.webform-submission-form #edit-contract-type--wrapper .js-form-item, .special-application-form form.webform-submission-form #edit-contract-type--wrapper .js-form-item {
background: rgba(0,0,0,.033);
vertical-align: top;
width: 95%;
padding: 2.5% 1.5%;
float: left;
font-family: 'UAFSans';
cursor: pointer;
margin-bottom:7px;
}
.modal-million form.webform-submission-form #edit-contract-type--wrapper .js-form-item:first-child, .special-application-form form.webform-submission-form #edit-contract-type--wrapper .js-form-item:first-child{
margin-bottom:13px!important;
}
.modal-description{display:none!important;}
.modal-million form.webform-submission-form .js-form-item.form-item-contract-type label {
margin: 0 0 5px 3px;
transform: translate(0%, -18%);
font-size: 1.2em;
}
.navbar-toggle, .web-animate{display:none;}
.horizontal-divice{display:none!important;}
.vertical-divice{display:inline-block;}
body{
font-size:15.4px;
}
.special-hero-section{
height:220vh;
max-height:220vh;
}
.special-page .center-logo h1,.special-page .center-logo h2 {
color: #fff;
display: inline-block;
font-size: .74em;
font-weight: 500;
text-transform: uppercase;
vertical-align: top;
margin: 7px 0 0;
padding: 0;
line-height: 1.37;
}
.center-logo img {
width: 42px;
height: 42px;
margin-right: 7px;
display: inline-block;
}
.hero-section-title {
position: absolute;
display: block;
width: 96%;
left: 1%;
padding:5% 1%;
top: 50vh;
z-index: 12;
text-align: center;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
background:rgba(30,30,30,.1);
}
.hero-section-title h1 {
font-size: 70px;
margin: 0 0 25px;
line-height:1.1;
}
.hero-section-title h4 {
font-size: 1.88em;
margin: 0px 0px 15px;
line-height:1.34;
}
.million-btn {
width:90%;
top:105vh;
right: 5%;
padding: 22px 0px 22px;
font-size: 1.15em;
letter-spacing: .25px;
font-family: 'Oswald';
letter-spacing:.2px;
}
.sroll-section-text {
position: absolute;
width: 97%;
left: 1.5%;
bottom: 5%;
}
.sroll-section-text img {
height: 130px;
width: auto;
margin-bottom: 19px;
}
.sroll-section-text h2.visible::before, .sroll-section-text h2.visible::after {
display:none!important;
}
.sroll-section-text h2 {
color: #fff;
font-family: 'Oswald' !important;
font-size: 55px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 30px;
position: relative;
display: inline-block;
text-transform: uppercase;
text-align: center;
}
.sroll-section-text p {
font-size: 1.17em;
display: block;
width: 96%;
font-weight: 500;
line-height: 1.45;
padding: 0;
margin: 0 auto;
}
.promo-special-section {
position: relative;
display: inline-block;
margin: -.3em auto 0;
width: 90%;
z-index: 12;
padding: 15% 5%;
background: #222123;
}
.promo-special-section .promo-left span {
position: relative;
display: block;
font-family: 'Oswald' !important;
text-transform: uppercase;
padding: 0;
margin: 25px 0 37px;
letter-spacing: 1.04px;
font-size: 4.05em;
font-weight: 900;
line-height: 1.14;
z-index: 7;
color: #fff;
text-align: left;
}
.promo-special-section .promo-left {
position: relative;
width: 100%;
margin: 0 0 3%;
}
.promo-special-section .promo-left p {
font-weight: 400;
font-size: 1.15em;
line-height: 1.55;
display: block;
text-align: left;
color: #fff;
}
.promo-button {
position: relative;
font-family: 'Oswald';
display: block;
width:96%;
padding: 19px 0px 19px;
display: inline-block;
border: 2.4px solid #0399B5;
background: #0399B5;
color: #fff;
border-radius: 35px;
font-size: 1.1em;
margin: 35px auto 4px;
line-height: 1;
letter-spacing: .05px;
overflow: hidden;
text-transform:uppercase;
box-shadow: 0 0 3.5px rgba(0, 0, 0, .15);
font-weight: 600;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: color 0.65s ease-in-out, border-color 0.65s ease-in-out;
}
.promo-right {
display: inline-block;
position: relative;
vertical-align: top;
width: 89%;
z-index: 9;
border: 0px solid blue;
margin: 60px 0 3% 6%;
text-align: left;
}
.promo-right li {
list-style: none;
background: url("./images/plus.png") no-repeat 1px 4px;
background-size: 20px 20px;
margin-bottom: 16px;
padding-left: 31px;
padding-bottom: 7px;
line-height: 1.45;
font-weight: 300;
text-indent: 0;
margin-left: -78px;
position: relative;
color: #fff;
font-size: 1.14em;
}
.sticky-button-yellow {
position: fixed;
z-index: 999;
bottom: 2.5%;
transform: translate(-50%, 0) !important;
left: 50% !important;
padding: 21.5px 0px 21.5px;
display:block;
width:96%;
text-align:center;
background: #F39200;
color: #fff;
z-index: 12;
font-size: 1.12em;
font-family: 'Oswald' !important;
font-weight: 600;
letter-spacing: .15px;
line-height: 1;
border-radius: 35px;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
opacity: 0;
}
.marine-corps-advantages img {
height: 120px;
width: auto;
display: block;
margin: 25px auto 31px;
}
.marine-corps-advantages h2 {
font-size: 65px;
font-weight: 900;
line-height: 1.12;
color: rgb(3, 153, 181);
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
margin: 0px 0px 1em;
}
.marine-corps-rows {
display:block;
}
.m-row {
display:block;
margin:0 auto 85px;
width: 96%;
text-align: center;
box-sizing: border-box;
}
.m-row:last-child{
margin:0 auto 0px;
}
.m-row span {
font-weight: bold;
display: block;
margin: 30px 0 0;
text-transform: uppercase;
font-size: 2.15em;
line-height:1.15;
font-family: Oswald;
}
.m-row p {
font-size: 1.14em;
color: #1c1c1c;
line-height: 1.52;
margin-top: 18px;
text-align: center;
}
/**/
#video-grid {
display: block; /* Замість flex використовується block */
margin-left:1.5%;
}
.vertical-video, .horizontal-video {
display: inline-block; /* Встановлюємо inline-block для відео */
margin-right: 0px; /* Між відео буде невеликий проміжок */
}
.vertical-video video, .horizontal-video video {
max-width: 49%;
width: 49%;
height: auto;
margin-right:1.5%;
}
.vertical-video video:nth-child(2n+2), .horizontal-video video:nth-child(2n+2){
margin-right:0%;
}
.horizontal-video video:nth-child(3){
max-width: 100%;
width: 100%;
height: auto;
margin-right:0;
margin-top:0%;
}
/* Приховуємо всі відео після перших двох */
.vertical-video video:nth-child(2),
.vertical-video video:nth-child(3) {
display: none;
}
.vertical-video, .horizontal-video {
width: 100%; /* Задаємо ширину 100% для контейнерів відео */
}
.commander {
width: 94%;
margin: 6em auto 0;
}
.commander h3 {
font-size: 4.45em;
font-weight: 900;
line-height: 1.2;
margin: 0px 0 .15em;
}
.commander h2 {
font-size: 1.7em;
font-weight: bold !important;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #222123;
margin: 0px 0 6px;
}
.command-position {
position: relative;
display: block;
text-align: left;
color: #0399B5;
font-family: 'Oswald';
font-size: 1.3em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .15px;
margin: 17px 0 5px;
}
.call-sign {
position: relative;
display: block;
text-align: left;
color: #222123;
font-family: 'Oswald';
font-size: 2.05em;
font-weight: 800;
}
.commanders-row p {
font-size: 1.07em;
line-height: 1.45;
color: #222123;
}
.commanders-row{
padding-bottom:70px;
}
.commanders-row:last-child{
padding-bottom:0px;
}
.play {
display: inline-block;
border: .5px solid #fff;
position: absolute;
bottom: 18px;
left: 11px;
width: 71px;
height: 71px;
padding: 10px;
border-radius: 50%;
background-color: rgba(255,255,255,.17);
background-image: url('./images/play-me.png');
background-size: 31% 31%;
background-position: 52.3% 51%;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.unit-traditions h3,
.unit-weaponry h3 {
font-size: 3.8em;
font-weight: 900;
line-height: 1.2;
margin: 0px 0 25px;
padding-bottom: 4px;
}
.unit-traditions p {
font-size: 1.1em;
line-height: 1.45;
color: #222123;
margin-bottom: 20px;
}
.unit-traditions,
.unit-weaponry {
width: 94%;
margin: 6em auto 0;
}
.special-form-section {
width: 95%;
margin: 6em auto 0;
}
.special-application-chevrons img {
display: inline-block;
height: 160px;
width: auto;
}
.special-join-us h4 {
font-size: 1.85em;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
font-family: Oswald !important;
padding: 0px;
color: #222123;
margin: 0px 0 18px;
}
.special-join-us p {
font-size: 1.08em;
line-height: 1.4;
margin-bottom: 11px;
color: #000;
display: block;
width: 97%;
text-align: center;
margin: 0 auto;
}
.special-application-form {
position: relative;
display: block;
width:94%;
overflow: visible;
border: 1px solid red;
margin: 0 auto;
text-align: center;
padding: 2.5% 1%;
background: rgba(255,255,255,.67);
border: 3.5px solid #0399B5;
z-index: 9;
box-shadow: 0 0 12.5px rgba(0, 0, 0, .13);
}
.special-application-form form.webform-submission-form .js-form-item:nth-child(2n+1) {
width: 91%;
display: block;
margin: 0 auto 15px;
}
.special-application-form form.webform-submission-form .js-form-item {
width: 91%;
display: block;
margin: 0 auto 15px;
}
.special-application-form form.webform-submission-form .js-form-item input[type="number"], .special-application-form form.webform-submission-form .js-form-item input[type="text"] {
border: 1.9px solid #2c2c2c;
padding: 15px 13px 15px;
background: transparent;
width: 90%;
margin-top: 6px;
font-size: 1.1em;
color: #000;
font-weight:500;
letter-spacing: .3px;
font-family: 'UAFSans' !important;
}
.special-application-form ::-webkit-input-placeholder{
color:#0399B5;
font-size:1em;
letter-spacing:.3px;
font-weight:500;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form ::-moz-placeholder{
color:#0399B5;
font-size:1em;
letter-spacing:.3px;
font-weight:500;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form :-moz-placeholder {
color:#0399B5;
font-size:1em;
letter-spacing:.3px;
font-weight:500;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form :-ms-input-placeholder {
color:#0399B5;
font-size:1em;
letter-spacing:.3px;
font-weight:500;
font-family: 'UAFSans'!important;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
-ms-transition: all .8s;
transition: all .8s;
}
.special-application-form form.webform-submission-form input.webform-button--submit {
width: 96%;
font-family: Oswald !important;
font-size: 1em;
letter-spacing: .15px;
text-transform: uppercase;
font-weight: 700;
margin: 30px auto 23px;
padding: 20.5px 0px 20.5px;
cursor: pointer;
text-align: center;
border-radius: 35px;
}
.hashtag{
position:relative;
display:block;
text-align:center;
margin:1em auto 0;
width:95%;
}
.hashtag a{
font-size:2.7em;
}
/**/
#footer{
position:relative;
display:block;
padding:70px 0 70px;
background:#222123;
margin:8em 0 0;
box-shadow:0 0 5px #222123;
}
.social{
position:relative;
display:block;
text-align:center;
margin:30px 0 0;
}
.social a{
display:inline-block;
border:.3px solid #fff;
width:35px;
height:35px;
padding:7px;
text-align:center;
border-radius:50%;
background-color5:transparent;
margin-right:17px;
background-size:65% 65%;
background-position:center center;
background-repeat:no-repeat;
opacity:.73;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.social a:last-child{
margin-right:0;
}
/************/
.vertical-block{display:block}
.web{display:none;}
.hello-media{
position:relative;
display:block;
width:100%;
height:100vh;
max-height:100vh;
text-align:center;
overflow:hidden;
z-index:35;
}
.hello-hover{
position: absolute;
display: block;
z-index: 8;
top: auto;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0);
background: linear-gradient(0deg,rgba(0,0,0,0.8884803921568627) 13%,rgba(0,0,0,0) 49%,rgba(0,0,0,0) 77%,rgba(0,0,0,0.9276960784313726) 97%);
}
.page-title {
position: absolute;
display: block;
z-index: 10 !important;
left: 3.55%;
top: auto;
bottom: 10.5%;
width: 95.5%;
color: #fff;
font-family: 'UAFSans';
}
.page-title h1{
font-size:3.8em;
text-transform:uppercase;
line-height:1.2;
padding:0;
margin:0 0 23px;
font-weight:900;
text-align:left;
width:85%;
}
.page-description p {
font-weight: 400;
font-size: 1.15em;
line-height:1.37;
display: block;
text-align: left;
width:100%;
}
.page-description p a{
color: rgb(243, 146, 0);
font-size: 1.15em;
display:block;
font-weight:bold;
text-align:left;
margin:25px 0 0;
}
/************/
/* Правки */
.brigade-co-row {
flex-direction: column; /* Переходимо на вертикальне розташування */
gap: 0; /* Прибираємо зайвий відступ */
}
.brigade-co {
width: 100%;
margin: 2em auto 1em;
padding: 0px;
border-radius: 8px;
}
.brigade-co-row img {
width: 100%;
height: auto;
object-fit: cover;
}
.brigade-co-row > div {
width: 100%;
padding: 0;
}
.brigade-co-row-info{
margin-top:35px;
padding:21px!important;
}
.co-position{
position: relative;
display: block;
text-align: left;
color: #0399B5;
font-family: 'Oswald';
font-size: 1.5em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .15px;
margin: 6px 0 1px 5px;
}
.co-call-sign{
position: relative;
display: block;
text-align: left;
color: #222123;
font-family: 'Oswald';
font-size: 2.45em;
font-weight: 800;
margin-left:5px;
}
.brigade-co-row p {
font-size: 1.07em;
line-height: 1.45;
color: #222123;
display:block;
width:97%;
margin:21px auto 0;
}
/**** Головна сторінка ****/
.hello-user{
height:170vh;
}
.slogan {
position: absolute;
width:80%;
height: auto;
display: block;
left: 3%;
top: 31vh;
z-index: 9;
color: #fff;
text-align: center;
}
.circle {
width: 101px;
height: 101px;
top: 75vh;
right: 10.5%;
}
.bottom-text {
width:93%;
left:2.5%;
bottom: 9%;
}
.full-ver{
display:none;
}
.mobile-ver{
display:block;
}
.bottom-text p {
font-size: 2.9em;
line-height: 1.36;
}
.bottom-text p strong{
color:#F39200;
margin-top:10px;
}
.vacancies-front h2 {
font-size: 2.68em;
font-weight: 700;
line-height: 1.3;
padding: 0;
margin: 0 0 2.14em;
display: block;
text-align: center;
}
.vacancies-front .hot {
position: relative;
display: block;
margin: 0em auto 0;
width: 98.5%;
}
.vacancies-front .slick-slide {
margin:0 5px;
}
.vacancies-front .row-title a {
font-weight: bold;
font-size: 1.28em;
}
.vacancies-front .bottom-button {
position: relative;
display: block;
margin: 3em auto 4.5em;
width: 96%;
text-align: center;
}
.vacancies-front .bottom-button a {
padding: 17px 0px 17px;
display: block;
width:87%;
border: 2.4px solid #0399B5;
border-radius: 45px;
font-size: 1.1em;
font-weight: 600;
margin:0 auto;
}
/**/
.brigades-front{display:none}
.brigade-block {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
position: absolute;
width: 100%;
}
.brigade-block.active {
opacity: 1;
visibility: visible;
position: static;
}
.brigades-toggle {
display: flex;
flex-direction: column;
gap: 18px;
margin:8em 0 40px;
}
.brigades-toggle .block-title {
position: relative;
display: block;
text-align: center;
margin-bottom:-29px;
}
.brigades-toggle span.radio-info{
font-size: 2.35em;
font-weight: 700;
line-height: 1.3;
font-family: Oswald !important;
text-transform: uppercase;
padding: 0;
letter-spacing:0;
margin: 0 auto 15px;
width: 97%;
text-align: center;
display: block;
color: #000;
}
.block-title span.big {
font-size: 4.1em;
}
.brigades-toggle label {
display: flex;
align-items: center;
background: #fff;
padding:9px 7px;
width:86.5%;
margin-left:4.5%;
cursor: pointer;
position: relative;
user-select: none;
box-shadow:0 0 3.5px rgba(0,0,0,.15);
}
.brigades-toggle input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 30px;
height: 30px;
border: 2.5px solid #222123;
border-radius: 50%;
margin-right: 7px;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.brigades-toggle input[type="radio"]::before {
content: "";
width: 45%;
height: 45%;
background-color: #0399B5;
border-radius: 50%;
transform: scale(0);
transition: transform 0.2s ease-in-out;
}
.brigades-toggle input[type="radio"]:checked::before {
transform: scale(1);
}
.radio-option img {
width: 60px;
height: 60px;
object-fit: contain;
display: block;
}
.brigades-toggle span {
font-size:1.17em;
font-weight:bold;
color: #222123;
line-height:1;
padding-left;8px;
transition: transform 0.2s ease-in-out;
}
.brigades-toggle input[type="radio"]:checked ~ span{
color: #F39200;
transition: transform 0.2s ease-in-out;
}
.mobile-brigades-baner{
position:relative;
display:block;
margin-bottom:25px;
}
.mobile-brigades-baner img{
width:94%;
height:auto;
margin:0 auto;
display:block;
border-radius:21px;
border:3.5px solid #0399B5;
}
.mobile-brigades-baner span{
color:#fff;
text-transform:uppercase;
font-size:2.93em;
display:block;
line-height:1.2;
font-weight:bold;
width:93%;
text-align:left;
margin:20px auto 35px;
font-family: 'Oswald' !important;
}
.mobile-brigades{
display:block;
background:#222123;
/*background:#e8e8e8;*/
padding:5% 0%;
margin:0 auto;
max-width:100%;
overflow:hidden;
}
.mobile-brigades-row{
display:block;
width:95%;
margin:0 auto 5%;
border-bottom:1.65px solid rgba(255,255,255,.35);
text-align:left;
padding:3% .25% 4.5%;
overflow:hidden;
/*background:rgba(255,255,255,.45);*/
}
.mobile-brigades-row:last-child{
border-bottom:0px solid rgba(255,255,255,.35);
}
.mobile-brigades-row img{
display:block;
width:28.5%;
height:auto;
margin:0 0 15px;
}
.mobile-brigades-row a{
font-size:1.29em;
color:#fff;
margin:17px 0 10px;
font-weight:700;
}
.mobile-brigades-row .view-block{
position:relative;
display:block;
text-align:right;
width:100%;
}
.mobile-brigades-row .view-block a.brigade-view{
display:inline-block;
padding:13px 35px;
font-size:.85em;
border-radius:30px;
/*background:#ebebeb;*/
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
color:#000;
box-shadow:0 0 6px #000;
font-weight:normal;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.mobile-brigades-row .view-block a.brigade-view:hover{
color:#fff;
background:#000;
box-shadow:0 0 5.5px rgba(0,0,0,.55);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
/**/
.center-block{
position:relative;
display:block;
margin:0em 0 5em;
text-align:center;
overflow:hidden;
max-width:100vw;
padding:2.55em 10px 1.5em;
background:rgba(30,30,30,.035);
}
.center-block .vertical-block p{
font-size: 1.8em;
font-weight: 700;
line-height: 1.3;
font-family: Oswald !important;
text-transform:uppercase;
padding:0;
margin:0 auto 24px;
width:97%;
text-align:center;
display:block;
}
.center-block .vertical-block p strong{
color: #F39200;
display:block;
font-size: 2.55em;
}
.center-block .vertical-block a {
font-size: 1.05em;
margin: 2em auto 2em;
padding: 21px 0px 21px;
display:block;
width:94%;
}
.one-year {
position: relative;
width: 100%;
max-width: 100%;
height: 700px;
background-size: cover;
background-repeat: no-repeat;
background-image: url("/themes/uanavy/images/mobile-18-24.webp");
overflow: hidden;
margin: 0em 0px 0em;
background-position: center center;
}
.one-info h2 {
display:none;
}
.mobile-one-info{display:block;}
.mobile-one-info h2{
font-family: 'Oswald' !important;
font-size: 3.84em;
font-weight: 700;
line-height: 1.3;
padding: 0;
width:95%;
padding:55px 2.6%;
text-align:center;
margin: 2.25em auto 0px;
position: relative;
display: block;
color:#fff;
background:#0399B5;
text-transform: uppercase;
box-shadow:0 0 5px #333;
}
.one-info {
position: absolute;
bottom: 3%;
left: 3.5%;
width: 93%;
z-index: 99;
text-align: center;
}
.one-info p {
color: #fff;
width: 100%;
display: block;
margin: 0 auto;
font-size: 1.06em;
font-weight: 500;
line-height: 1.65;
font-family: 'UAFSans';
}
.yellow-btn {
position: relative;
display: block;
width:94%;
margin: 2.0em auto 1.5em;
padding: 21px 0px 21px;
background: #F39200;
color: #fff;
z-index: 12;
font-size: 1.13em;
font-weight: 600;
letter-spacing: .15px;
line-height: 1;
border-radius: 35px;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-webkit-animation: pulse 2.25s infinite;
}
.main-form .webform-title span {
display: block;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-size: 4.85em;
font-family: 'Oswald';
line-height: 1;
opacity: 1;
transition: transform 0.3s ease;
}
.big-top {
transform: translateX(10%);
}
.big-bottom {
transform: translateX(-10%);
}
.main-form .main-form-block {
position: relative;
display: block;
margin: 0 auto 3em;
width: 85%;
padding: 4.25% 5%;
background: #fff;
/* border-radius: 6px; */
border: 2.5px solid #0399B5;
z-index: 9;
box-shadow: 0 0 12.5px rgba(0,0,0,.13);
}
.form-description p {
font-size: 1.12em;
line-height: 1.44;
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 2px solid rgba(0,0,0,.25);
}
/**/
.main-form form.webform-submission-form .js-form-item,
.main-form form.webform-submission-form .js-form-item:nth-child(2n) {
width: 96%;
display: block;
margin: 0 0% 2.5% 0;
}
.main-form form.webform-submission-form .js-form-item input[type="number"], .main-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 17px 13px 17px;
background: transparent;
width: 95%;
margin-top: 6px;
font-size: 1.05em;
font-weight:normal;
line-height:1;
color: #0399B5;
letter-spacing: .3px;
font-family: 'UAFSans' !important;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper span{
margin-bottom:21px!important;
font-size:1.24em;
line-height:1.55;
}
.main-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option {
width: 43px;
height: 43px;
padding: 5.2px;
font-size:.99em;
margin-top:15px;
margin-bottom:15px;
}
.main-form form.webform-submission-form .js-form-item textarea {
border: 2.2px solid #2c2c2c;
padding: 15px 14px 14.5px;
width: 92.5%;
max-width: 92.5%;
min-width: 92.5%;
height: 130px;
min-height: 130px;
max-height: 192px;
font-size: 1.05em;
font-weight:normal;
color: #000;
font-family: 'UAFSans' !important;
background: rgba(255,255,255,.19);
margin-top: 2px;
}
.main-form form.webform-submission-form input.webform-button--submit {
width: 99.5%;
font-size: 1em;
margin: .65em 0 .65em;
padding: 21px 0px 21px;
text-align: center;
border-radius: 35px;
}
.main-faq{
width:95%;
margin:3.7em auto 0em;
padding-left:.15%;
}
.main-faq h3 {
line-height: 1.35;
font-weight: bold;
text-transform: uppercase;
font-size: 2.8em;
font-family: 'Oswald';
text-align: center;
}
.faq-sec {
position: relative;
display: block;
width: 97%;
margin: 2.5em auto 0em;
}
.faq-title {
border: 1.85px solid #040404;
padding: 17px 37px 17px 12px;
font-size: 16.45px;
background: #fff;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
background-image: url(./images/plus_icon.png);
background-repeat: no-repeat;
background-position: 98% 50%;
background-size: 24px 24px;
cursor: pointer;
}
.faq-title.active {
background-image: url(./images/minus_icon.png);
border: 1.85px solid #F39200;
background-color: rgba(232, 160, 51,.083);
background-size: 24px 24px;
}
.faq-content {
display: none;
margin: 10px 0;
padding: 4%;
border:2px solid #0399B5;
background: rgba(255, 255, 255,1);
}
.faq-content ol,.faq-content ul{
margin-left:6%;
padding:0;
}
.faq-content p {
font-size: 1.05em;
line-height: 1.45;
font-weight:normal;
}
.faq-content li {
margin-bottom: 10px;
font-size: 1.05em;
}
.promo-sec {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
width: 84%;
margin-top: 2em;
padding: 0 1em;
position: relative; /* 🔹 дозволяє управляти шаровістю */
overflow-x: clip; /* 🔹 обрізає тільки по ширині */
overflow-y: visible; /* 🔹 дозволяє "вилазити" вниз, якщо треба */
}
.promo-sec video {
width: 32%;
margin: -10px -5px; /* трохи заходять одне на одного */
transform: none !important;
border-radius: 15px;
border: 5px solid #f8f8f8;
transition: transform 0.3s ease;
}
/* Верхній ряд */
.promo-sec video:nth-child(1) {
transform: rotate(-4deg) !important;
z-index: 3;
}
.promo-sec video:nth-child(2) {
transform: rotate(3deg) !important;
z-index: 2;
}
.promo-sec video:nth-child(3) {
transform: rotate(-2.5deg) !important;
z-index: 4;
}
/* Нижній ряд */
.promo-sec video:nth-child(4) {
order: 2;
width: 50%;
transform: rotate(2.5deg) !important;
margin: -15px -19px;
z-index: 2;
}
.promo-sec video:nth-child(5) {
order: 2;
width: 52%;
transform: rotate(-5deg) !important;
margin: -12px 0px;
z-index: 3;
}
/* Порядок для верхнього ряду */
.promo-sec video:nth-child(1),
.promo-sec video:nth-child(2),
.promo-sec video:nth-child(3) {
order: 1;
}
/**/
/*Mobile Menu*/
.menu-overlay {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
align-items: center; /* Центрує по горизонталі */
justify-content: center; /* Центрує по вертикалі */
z-index: 9999;
padding: 20px;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
visibility: hidden;
pointer-events: none;
}
.menu-overlay.active {
transform: scaleY(1);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#main-menu {
display: none;
}
.menu-close-button {
font-size: 27px;
font-weight: 700;
background: transparent;
border: none;
color: #000;
cursor: pointer;
position: fixed; /* Використовуємо fixed, щоб фіксувати в куті */
top: 17px; /* Відступ зверху */
right: 14px; /* Відступ з правого боку */
z-index: 10000; /* Збільшуємо z-index для того, щоб кнопка була поверх інших елементів */
}
.menu-header {
display: none;
justify-content: space-between;
align-items: center;
margin:10px 0 0px;
position: relative;
background:transparent;
padding:0;
font-family: 'UAFSans';
}
.menu-header.show {
display:block;
width:100%;
text-align:center;
}
#menu-title{
font-size:1.34em;
color:#fff;
font-family: 'UAFSans';
font-weight:600;
padding:18px 0;
width:100%;
display:inline-block;
text-align:center;
background:rgba(3, 153, 181,1);
}
.menu-title.main-title {
font-family: 'UAFSans';
display: flex;
align-items: center;
padding: 24px 20px;
width: 93%;
margin-left:.5%;
background: #F8F8F8;
font-size: 1.34em;
font-weight: 600;
color: #000;
text-align: left;
}
.menu-title.main-title img {
width: 45px;
height: 45px;
margin-right: 10px;
flex-shrink: 0;
}
.menu-title.main-title p {
margin: 0;
font-family: 'UAFSans';
padding: 0;
font-size: 0.85em;
font-weight: 500;
text-transform: uppercase;
line-height:1;
}
.back-link{
display:inline-block;
margin:10px auto 0%!important;
background:#F8F8F8;
padding:14px 46px;
color:#000;
font-size:.75;
font-weight:bold;
font-family: 'UAFSans';
float:right;
text-transform:uppercase;
}
#menu-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 20px;
font-family: 'UAFSans';
align-items: flex-start; /* Центрує пункти меню по горизонталі */
justify-content: flex-start;
margin-top:10%;
width: 100%;
overflow-x:auto;
max-width: 600px;
}
.menu-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
font-size: 1.18em;
cursor: pointer;
position: relative;
border-bottom:1.35px solid rgba(30,30,30,.08);
display: block;
justify-content: center;
text-align: left;
font-family: 'UAFSans';
padding:5px 1% 20px;
width:97%;
font-weight:normal;
}
.menu-item.has-image{
padding-left:14%;
width:83%
}
.menu-item.show {
opacity: 1;
transform: translateY(0);
}
/* Оновлений стиль для пунктів меню з фото чи підменю */
.menu-item img, .submenu-toggle {
margin-right: 10px; /* Додаємо відступ, якщо є фото чи кнопка */
}
.menu-item img {
width: auto;
height: 41px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-71%);
}
.menu-item.has-image,
.menu-item.has-submenu {
justify-content: center;
}
/* Активуємо анімацію поступово */
.menu-item.show {
opacity: 1;
transform: translateY(0);
}
.submenu-toggle {
border-radius: 50%;
padding: 0px;
font-weight: bold;
position: absolute;
top:-25%;
font-size:2.5em;
font-weight:200;
color:#0399B5;
right: 0px;
}
#menu-toggle {
position: fixed;
top: 20px;
right:20px;
width: 48px;
height: 48px;
background-color: #0399B5;
background-image: url('./images/menu-icon.png');
background-size: 60% 60%;
background-position: center center;
background-repeat: no-repeat;
padding: 10px;
border-radius: 50%;
z-index: 991;
cursor: pointer;
display:inline-block;
border:none;
color:transparent;
}
#menu-toggle:hover{
background-color:#222123;
-webkit-transition: all .38s;
-moz-transition: all .38s;
-o-transition: all .38s;
-ms-transition: all .38s;
transition: all .38s;
}
/* Сторінка Бригади - Підрозділу */
.hello-brigade {display:none;}
.brigade-name {display:none;}
.hello-chevrons{display:none}
.mobile-hero-section{
position:relative;
display:block;
width:100%;
max-width:100%;
height:133vh;
max-height:133vh;
overflow:hidden;
margin-bottom:0px;
z-index:9;
overflow-x:hidden;
}
.mobile-unit{
display:block;
position:absolute;
bottom:45vh;
left:1.25%;
width:97%;
z-index:13;
text-align:center;
border:0px solid red;
}
.mobile-unit img{
height:115px;
width:auto;
margin-bottom:15px;
}
.mobile-unit h1{
color:#fff;
font-family: 'Oswald';
font-size:2.8em;
font-weight:bold;
margin:0;
line-height:1.3;
text-transform:uppercase;
}
.banner-section-unit{
width: 100vw;
height: 107vh;
max-height: 107vh;
display:block;
bottom: 0;
z-index:8;
object-fit: cover;
left: 0;
transition: filter 0.3s ease-in-out;
z-index: 1;
background-color:#000;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
.mobile-social{
display:block;
position:absolute;
z-index:13;
bottom:28vh;
left:1.25%;
width:97%;
text-align:center;
}
.mobile-social a{
display:inline-block;
border:1.85px solid #0399B5;
width:50px;
height:50px;
padding:5px;
border-radius:50%;
background-color:rgba(255,255,255,.65);
background-size:90% 90%;
background-position:center center;
background-repeat:no-repeat;
opacity:.83;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.mobile-social a:hover{
background-color: rgba(9, 155, 183, 0.45);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
opacity:1;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
.mobile-social a.fb{
background-image: url('./images/fb-black.png');
margin-right:25px;
}
.mobile-social a.instagram{
background-image: url('./images/instagram-black.png');
}
#unit-btn-mobile{
position:absolute;
display:block;
width:85%;
margin: 4em 0 1em;
left:7%;
bottom:5%;
text-align:center;
padding: 24px 0px 24px;
background: #F39200;
color: #fff;
z-index: 12;
font-size: 1.15em;
font-weight: 600;
letter-spacing: .15px;
line-height:1;
border-radius: 35px;
cursor:pointer;
text-transform: uppercase;
box-shadow:0px 1px 3px #F39200;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-webkit-animation: pulse 2.25s infinite;
}
#unit-btn-mobile:hover {
-webkit-animation: none;
background:#0399B5;
color:#1c1c1c;
box-shadow:0 0 4px rgba(0,0,0,.45);
-webkit-transition: all .35s;
-moz-transition: all .35s;
-o-transition: all .35s;
-ms-transition: all .35s;
transition: all .35s;
}
.motto .lines.reverse, .motto .lines {padding: 1.27em 0;}
.brigade-overview {
position: relative;
padding: 6% 4%;
text-align: left;
display: block;
background: #F8F8F8;
}
.unit-gallery {
position: relative;
display: block;
margin: 5em auto 0;
width: 96%;
border: 0px solid red;
}
.scrolling-header span {
display: block;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-size: 4.6em;
font-family: 'Oswald';
line-height: 1.1;
opacity: 1;
transition: transform 0.3s ease;
}
.unit-vacancies-block .vacancie-row {
position: relative;
display: block;
margin: 0 0 4.5%;
padding: 1.5%;
border: 3.15px solid #0399B5;
width:94%;
vertical-align: top;
}
.unit-vacancies-block .vacancie-row:nth-child(2n+1) {
margin: 0 0 4.5%;
}
.unit-vacancies-block .vacancie-row span {
font-size: 1.2em;
font-weight: 500;
display: table-cell;
width: 100%;
vertical-align: middle;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.unit-vacancies-block .vacancie-row .bottom-go {
position: absolute;
bottom: 7px;
right: 7px;
width: 50px;
height: 50px;
display: block;
background-image: url("./images/btn-arrow-vacancie.png");
background-size: 19px 19px;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: all .25s ease;
-moz-transition: all .25 ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.brigade-application-form {
width: 96%;
margin: 9em auto 0;
}
.join-us {
position: relative;
display: block;
width:95%;
vertical-align: top;
margin:2% auto 0;
text-align: left;
}
.join-us h4{
margin: 0px 0 20px;
}
.join-us p{
font-size: 1.1em;
line-height: 1.4;
margin-bottom:18px;
color: #000;
}
.application-chevrons {
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.065;
width: 100%;
text-align: center;
}
.application-chevrons img {
display: inline-block;
animation: grayscale-animation 9s infinite alternate;
height: auto;
min-height: auto;
width: 75%;
}
.application-form {
position: relative;
display: block;
width:90%;
vertical-align: top;
text-align: left;
padding: 2.5%;
margin:2% auto 0;
background: rgba(255,255,255,.67);
border: 2.5px solid #0399B5;
z-index: 9;
box-shadow: 0 0 12.5px rgba(0, 0, 0, .13);
}
/**/
.application-form form.webform-submission-form .js-form-item,
.application-form form.webform-submission-form .js-form-item:nth-child(2n) {
width: 96%;
display: block;
margin: 0 0% 2.5% 0;
}
.application-form form.webform-submission-form .js-form-item input[type="number"], .application-form form.webform-submission-form .js-form-item input[type="text"] {
border: 2.2px solid #2c2c2c;
padding: 17px 13px 17px;
background: transparent;
width: 95%;
margin-top: 6px;
font-size: 1.05em;
font-weight:normal;
line-height:1;
color: #0399B5;
letter-spacing: .3px;
font-family: 'UAFSans' !important;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper span{
margin-bottom:21px!important;
font-size:1.24em;
line-height:1.55;
}
.application-form form.webform-submission-form #edit-chy-ye-viyskovosluzhbovtsem-na-danyy-moment--wrapper.js-form-item .option {
width: 43px;
height: 43px;
padding: 5.2px;
font-size:.99em;
margin-top:15px;
margin-bottom:15px;
}
.application-form form.webform-submission-form .js-form-item textarea {
border: 2.2px solid #2c2c2c;
padding: 15px 14px 14.5px;
width: 92.5%;
max-width: 92.5%;
min-width: 92.5%;
height: 130px;
min-height: 130px;
max-height: 192px;
font-size: 1.05em;
font-weight:normal;
color: #000;
font-family: 'UAFSans' !important;
background: rgba(255,255,255,.19);
margin-top: 2px;
}
.application-form form.webform-submission-form input.webform-button--submit {
width: 99.5%;
font-size: 1em;
margin: .65em 0 .65em;
padding: 21px 0px 21px;
text-align: center;
border-radius: 35px;
}
/* Головна Сторінка 18-24 */
.mobile-slider{
display:block;
height:90vh;
position:relative;
overflow:hidden;
}
.web-slider{
display:none;
}
.mobile-slider .slider.lymon {
overflow:hidden;
min-height:100%!important;
height:100%!important;
}
.mobile-slider .slider.lymon .slick-slide{
/*min-height:92vh;*/
min-height:100%!important;
position:relative;
display:block;
height:92vh;
}
.slider.lymon .slick-slide img.lymon-mobile-baner{
height:90vh;
width:auto;
}
.slider.lymon .slick-slide .lymon-info img{
height:auto;
width:100px;
max-width:100px;
max-height:auto;
margin-bottom:17px;
}
.lymon-info a.unit-name-link {
position: relative;
display: block;
font-size: 2.7em;
font-weight: 700;
line-height: 1.3;
color: #fff;
text-transform: uppercase;
font-family: Oswald;
padding: 0px;
margin: 0px 0 15px;
}
#lymon-go {
position: relative;
display: inline-block;
margin: 1.15em 0 0em;
padding: 20.5px 94px 20.5px;
font-size: .92em;
}
.lymon-info {
position: absolute;
display: inline-block;
bottom: 3em;
left: 2%;
}
.main-title-section h1 {
font-size: 3.0em;
font-weight: 900;
line-height: 1.2;
color: rgb(3, 153, 181);
font-family: Oswald;
padding: 0px;
margin: 0px 0px .5em;
}
.main-title-section p {
width: 95%;
display: block;
margin: 0 auto 0;
font-size: 1.2em;
line-height: 1.5;
}
.benefits-section {
width: 92%;
margin: 3.5em auto 0;
display: block;
}
.benefits-section ol {
display: block;
counter-reset: none;
list-style: decimal;
list-style-position: inside;
padding-left: 1.2em;
gap: 0;
}
.benefits-section li {
all: unset;
display: list-item;
background-color: #f2f2f2;
margin-bottom: 12px;
padding: 15px 16px;
border-radius: 8px;
border:none!important;
font-size: 1.4em;
font-family: Oswald;
}
.benefits-section li::before {
content: none;
}
.benefits-section ol{
padding-left:0em;
}
.special-units-row:nth-child(odd),
.special-units-row{
position: relative;
display: block;
width:93%;
text-align: center;
vertical-align: top;
padding: 2.5%;
margin:1% auto 1.9em;
background: #f2f2f2;
border: 2.5px solid transparent;
}
.special-units-row img {
height: auto;
width: 39%;
display: block;
margin: 0 auto 20px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.special-units-row a {
color: #000;
font-size: 1em;
text-align: left;
}
.special-units-row a.special-view {
display: block;
width:90%;
padding: 18px 5px;
font-size: .95em;
border-radius: 30px;
margin: -7px auto 0;
background: #ebebeb;
color: #fff;
text-align:center;
background: #000;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
/**/
.big-motto {
margin: 3.1em auto 0;
}
.big-motto .line span {
padding: 0 0 0 1.15em;
font-size: 9em;
}
.big-motto .line {
animation: marquee 335s linear infinite;
}
.title-section h1 {
font-size: 4.65em;
line-height: 1.2;
margin: 5px 0px .25em;
}
.title-section p {
font-size: 1.3em;
line-height: 1.4;
font-weight: 600;
margin: 0 0 16px;
padding: 0;
}
.title-section p strong {
color: #F39200;
font-size: 1.32em;
}
.positions-facets h2 {
font-size: 1.58em;
}
.positions-facets ul li {
padding:16px 12px;
margin: 0 10px 20px;
}
.positions-facets .facets-checkbox + label {
padding-left: 62px;
min-height: 28px;
cursor: pointer;
font-weight:normal;
font-size: 1.05em;
}
.navy-positions .views-row{
position:relative;
display:block!important;
margin:0 auto 25px!important;
padding: 1.5%;
border: 2.5px solid #0399B5;
width:93%;
vertical-align:top;
}
.navy-positions .views-row:nth-child(odd){
margin:0 auto 25px;
}
.navy-positions .views-row .bottom-go {
position: absolute;
bottom: 7px;
right: 10px;
width: 40px;
height: 40px;
background-size: 19px 19px;
}
.navy-positions .views-row span {
font-size: 1.2em;
font-weight: 500;
width: 93%;
display:inline-block;
}
.js-pager__items.pager li a {
width:97%;
display: block;
font-size: .97em;
letter-spacing: .15px;
font-weight: 700;
margin: 4em auto 1em;
padding: 21px 0px 21px;
}
/**/
.vacancie-page .brigade-head {
width: 95%;
position: relative;
display: block;
margin: 1.35em auto 0;
padding: 0;
height:250px;
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
}
.go-vacancie-btn {
display:none;
}
.vacancie-page .scrolling-header{display:none}
.vacancie-page .sub-block{display:none}
.brigade-head h3 {
position: absolute;
width: 95%;
top:auto;
bottom:3%;
transform: translate(0%, -50%);
left:2.5%;
color: white;
text-align:center;
font-size: 1.5em;
padding: 0;
margin: 0;
font-weight: bold;
z-index: 9;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.vacancie-page .brigade-head .hello-chevrons {
display:none;
}
.motto-vacancie-page {
overflow: hidden;
width: 95.0%;
position: relative;
display: block;
margin: 0 auto 0;
z-index: 10;
}
.vacancies-body {
width: 84%;
padding: 3% 3%;
}
.vacancies-top-label {
text-transform: uppercase;
font-size: 1.5em;
color: rgba(106,101,58,.31);
font-weight: 500;
display: block;
margin: 15px 0 15px;
text-align: center;
}
.vacancies-body h1 {
position: relative;
display: inline-block;
width: 100%;
padding: 0;
letter-spacing: .34px;
font-size: 2.4em;
padding: 0;
margin: 0 0 1.2em;
font-weight: 600;
line-height: 1.3;
}
.salary {
display: inline-block;
padding: 21px 7px;
background: rgba(0,0,0,.032);
margin: 5px 0 15px;
width: 95%;
}
.mobile-chevron{
display:block;
height:130px;
width:auto;
margin:3% auto;
}
.field-label {
font-size: 1.35em;
color: #0399B5;
border-bottom: 1.85px solid #0399B5;
padding: 0 0 5px;
margin-bottom: 25px;
}
.vacancies-body p {
font-size: 1.0em;
line-height: 1.5;
color: #000;
margin-bottom: 25px;
}
.vacancies-body li {
font-size: .97em;
color: #000;
margin-bottom: 19px;
background: url("./images/plus.png") no-repeat 0px 3px;
background-size: 17px 17px;
padding: 0 0 0 25px;
line-height: 1.55;
list-style: none;
}
.vacancy-application-title {
position: relative;
display: block;
text-align: center;
width: 99%;
margin: 15px auto 15px;
padding: 25px 0;
background: rgba(3, 153, 181,.06);
}
.vacancy-application-title span.vacancies-label {
display:block;
color: #000;
font-size: 1.05em;
line-height: 1;
margin:0 auto 6px;
text-align:center;
font-weight: 100;
}
.vacancy-application-title span {
display: block;
color: #000;
text-align:center;
font-size: 1.1em;
line-height: 1.05;
font-weight: 500;
}
.mobile-header{
display: block;
line-height: 1.1;
font-weight: bold;
width:97%;
text-transform: uppercase;
font-size: 4.1em;
font-family: Oswald;
text-align: center;
padding:15px 0px;
margin:2.5em 0 0px;
overflow: hidden;
}
.vacancy-form {
position: relative;
display: block;
width: 95%;
margin: 0 auto;
padding: 3% 0%;
}
.vacancy-form form.webform-submission-form .js-form-item, .vacancy-form form.webform-submission-form .js-form-item:nth-child(2n) {
width: 95%;
display: block;
margin: 0px 0 25px;
}
.vacancy-form form.webform-submission-form .js-form-item label {
font-size: 1.01em;
margin-bottom: 6px;
}
.related-vacancies {
width: 93%;
margin: 1em auto 0;
}
.related-vacancies .vacancie-row:nth-child(2n),
.related-vacancies .vacancie-row {
position: relative;
display: inline-block;
margin: 0 0 2.5%;
padding: 1.5%;
border: 2.5px solid #0399B5;
width: 94%;
vertical-align: top;
}
.go-brigade-btn {
position: relative;
display: block;
width: 95%;
padding: 21px 0px 21px;
border: 2.4px solid #222123;
background: transparent;
color: #000;
text-align: center;
border-radius: 35px;
font-size: 1.04em;
margin: 1em auto 0;
line-height: 1;
letter-spacing: .05px;
overflow: hidden;
box-shadow: 0 0 3.5px rgba(0, 0, 0, .15);
font-weight: 400;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: color 0.65s ease-in-out, border-color 0.65s ease-in-out;
}
/**/
.military-branch-hello-section{display:none}
/**/
.mobile-taxonomy-hero-section{
position:relative;
display:block;
width:100%;
max-width:100%;
height:95vh;
max-height:95vh;
overflow:hidden;
margin-bottom:0px;
z-index:9;
overflow-x:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
animation: swingBackground 7s ease-in-out infinite alternate;
}
@keyframes swingBackground {
0% {
background-position: 35% center; /* Вліво */
}
100% {
background-position: 65% center; /* Вправо */
}
}
.mobile-taxonomy-title{
display: block;
position: absolute;
bottom: 4%;
left: 2.15%;
width: 95%;
z-index: 13;
text-align: center;
border: 0px solid red;
}
.all-units .mobile-taxonomy-title{
display: block;
position: absolute;
bottom: 12%;
left: 2.15%;
width: 95%;
z-index: 13;
text-align: center;
border: 0px solid red;
}
.mobile-taxonomy-title img {
height: 115px;
width: auto;
margin-bottom: 15px;
}
.mobile-taxonomy-title h1 {
color: #fff;
font-family: 'Oswald';
font-size: 3.1em;
font-weight: bold;
margin: 0;
line-height: 1.3;
text-transform: uppercase;
}
.all-units .mobile-taxonomy-title h1 {
color: #fff;
font-family: 'Oswald';
font-size: 4em;
font-weight: bold;
margin: 0;
line-height: 1.3;
text-transform: uppercase;
}
.motto-taxonomy .lines {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: #0399B5;
padding: 1.27em 0;
}
.motto-taxonomy .line span {
padding-right: 2.65em;
color: #fff;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
}
.military-branch-body {
position: relative;
display: block;
width: 95%;
margin: 3em auto 0;
}
.military-branch-body .views-row:nth-of-type(3n+2) {
margin: 0 auto 40px;
}
.military-branch-body .views-row {
display:block;
text-align: center;
width:95%;
vertical-align: top;
margin: 0 auto 40px!important;
padding:20px 1.5%;
background-color: #f2f2f2;
border: 2.5px solid transparent;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
.military-branch-body .views-row a {
font-size: 1.25em;
}
.military-branch-body h2{display:none;}
/**/
.positions-facets .facets-checkbox + label {
position: relative;
display: inline-flex;
align-items: center;
padding-left: 62px;
min-height: 34px;
height: 34px;
cursor: pointer;
}
.positions-facets .facets-checkbox + label::after {
content: '';
position: absolute;
top: 5px;
left: 2px;
width: 24px;
height: 24px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s;
z-index: 2;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/**/
.call-us{
position:relative;
display:block;
text-align:center;
margin:2.5em 0 1.5em;
}
.call-us a{
color: rgb(3, 153, 181);
font-size: 2.9em;
font-family: 'Oswald';
font-weight: 500;
padding: 0;
margin: 0;
display: inline-block;
line-height: 1;
text-transform: uppercase;
-webkit-transition: all .34s ease;
-moz-transition: all .34s ease;
-ms-transition: all .34s ease;
-o-transition: all .34s ease;
transition: all .34s ease;
}
}
/*
@media only screen and (max-width:1480px){}
*/