@charset "UTF-8";
/**
 * Theme Name: REVERSWEB
 * Version: 2.1
 * Description: REVERSWEB
 * Theme URI: https://reverseweb.com/
 * Author: ATDev
 * Author URI: https://w.tretiak.org/
 * Template: twentytwentyone
 */

/* --------------------------------------------------------------------------------------------------
 * Здесь находятся основные стили. Все базовые CSS и JS TwentyTwentyOne и JetPack отключены.
 * Скрипты отключения находятся в functions.php
 * CSS и JS отдельных страниц и элементов используются только на соответствующих страницах. Подключены в functions.php
 * ------------------------------------------------------------------------------------------------ */

/* ---tmp--- */
article#post-937 :where(form) :is(input, textarea) {
    background-color: #fff;
}

a.skip-link.screen-reader-text,
body:not(.category.category-blog) aside.widget-area,
footer.site-footer {
    display: none;
}

/* body.category section.content h2,
body.category .service-post-first-container>h2.wp-block-heading {
    display: none;
} */

/* -- */

:root body.custom-background {
    background-color: #000000;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;
    background-color: #000;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-family: 'Zilla Slab', serif;
    font-style: normal;
    color: #fff;
}

* {
    -webkit-tap-highlight-color: transparent !important;
    /* Antiblik */
}

*,
::before,
::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* ПРИМ: 16px в inputs, необходимые для не масштабирования на Iphone */
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="url"],
form input[type="date"],
form input[type="month"],
form input[type="time"],
form input[type="datetime"],
form input[type="datetime-local"],
form input[type="week"],
form input[type="number"],
form input[type="search"],
form input[type="tel"],
form input[type="color"],
form select,
form textarea {
    font-size: 16px;
    width: 100%;
    background-color: transparent;
}

/* form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form input[type="url"]:focus,
form input[type="search"]:focus,
form input[type="number"]:focus,
form textarea:focus {
    border: 1px solid;
    border-color: #12d1a0;
} */

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
    display: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="submit"],
/*input[type="date"],*/
textarea {
    -webkit-appearance: none;
    appearance: none;

}

input[type="date"] {
    min-width: max-content;
}

form.wpcf7-form label.checkbox span.wpcf7-list-item-label {
    padding-left: .25rem;
}

form.wpcf7-form label.checkbox input[type="checkbox"] {
    width: 1em;
    height: 1em;
    padding-right: 0.5em;
    position: static;
    display: inline;
    float: left;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0 auto 1.5rem;
}

body .form-container form span.wpcf7-not-valid-tip {
    color: #E560CC;
    font-size: .7em;
    position: absolute;
    margin: 0;
    left: 0;
    bottom: -1.25em;
}

/*Убрать стрелки input[type="number"]*/
/*input[type="number"] {*/
/*    -moz-appearance: textfield;*/
/*}*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
}

input:-internal-autofill-selected {
    border: 1px solid #0076aa !important;
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    -ms-border-radius: 3em;
    -o-border-radius: 3em;
    border-radius: 3em;
}

/* === scroll bar === */
::-webkit-scrollbar {
    background: linear-gradient(0deg, rgba(255, 0, 207, 0.15) 13.85%, rgba(0, 177, 255, 0.15) 87%), rgba(187, 51, 220, 0.2);
    width: 8px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    background: linear-gradient(0deg, rgba(255, 0, 207, 0.15) 13.85%, rgba(0, 177, 255, 0.15) 87%), rgba(187, 51, 220, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #4262B7;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}

/* -moz- */
html,
body {
    scrollbar-color: #438DF3 #30007b;
    scrollbar-width: thin;
}

/* === === */

h1,
h2 {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: inherit;
}

a,
a svg path {
    text-decoration: none;
    color: inherit;
    transition-duration: .5s;
}

a:hover,
a:hover svg path {
    transition-duration: .5s;
}

ul {
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

blockquote {
    display: block;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

p,
em,
a,
li,
span,
blockquote,
figcaption,
button {
    font-family: 'Zilla Slab', serif;
    font-style: normal;
    font-weight: 300;
    font-size: calc(20px + 4 * (100vw - 1024px)/ (1920 - 1024));
    color: #fff;
    transition-duration: .5s;
}

img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}


button {
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: inherit;
    border-color: inherit;
    border-image: initial;
    cursor: pointer;
}

input {
    outline: none;
    border: none;
    font-family: inherit;
    font-size: 16px;
}

input[type="search" i] {
    padding: 0;
    color: inherit;
    font-family: 'Zilla Slab', serif;
}

textarea {
    outline: none;
    border: none;
    resize: none;
    font-size: 16px;
    border-width: inherit;
    border-color: inherit;
}

div.site {
    position: relative;
    width: 100%;
    padding: 0 5vw;
    min-height: 100vh;
    overflow: hidden;
}

header.entry-header.alignwide,
header.page-header.alignwide {
    overflow: hidden;
    width: 100vw;
    position: relative;
    text-align: center;
    left: -5vw;
    padding-top: calc(4vw + 36px + 6 * (100vw - 1024px) / (1920 - 1024));
}

body.single article.category-blog .entry-header.alignwide {
    width: 100%;
    left: auto;
}

figure.post-thumbnail {
    max-width: 800px;
    margin: 6rem auto 1rem;
}

/* Web-Development */
div.ellipse-13 {
    position: absolute;
    width: 1590px;
    width: 200%;
    height: 1590px;
    height: 246%;
    left: -133%;
    top: -192%;
    background: radial-gradient(22.48% 23.65% at 57.65% 50%, rgba(4, 240, 255, 0.2) 0%, rgba(4, 240, 255, 0) 100%);
    z-index: -1;
}

aside.clients-testimonials .ellipse-1 {
    position: absolute;
    width: 110%;
    height: 110%;
    left: -36%;
    top: -40%;
    background: radial-gradient(28.01% 29.47% at 57.65% 50%, rgba(255, 0, 207, 0.085) 0%, rgba(255, 0, 207, 0.125) 0.01%, rgba(255, 0, 207, 0) 100%);
    z-index: -1;
}

/*ENTRY HEADER H1*/
header.alignwide h1 {
    position: relative;
    margin: 0 auto;
    font-family: 'Coldiac Free Regular', serif;
    font-weight: 400;
    line-height: .85;
    text-transform: capitalize;
    text-align: center;
    background: linear-gradient(0deg, rgba(255, 0, 207, 0.15) 13.85%, rgba(0, 177, 255, 0.15) 87%), rgba(187, 51, 220, 0.2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.page-id-32 header.alignwide h1.entry-title {
    line-height: 1.15;
}

body.page-id-30 header.alignwide h1.entry-title {
    line-height: 1.05;
}

body.category header.alignwide h1 {
    font-size: 0;
}

header.alignwide h1 span {
    font-family: inherit;
    font-style: inherit;
    font-size: calc(112px + 98 * (100vw - 1024px) / (1920 - 1024));
    line-height: 1.2;
    word-break: break-word;
}

.archive-description {
    display: none;
}

body.category.category-services .page-header.alignwide .page-title>span {
    display: block;
    width: max-content;
    margin-left: -.06em;
    font-size: calc(250px + 220 * (100vw - 1024px) / (1920 - 1024));
    line-height: .95;
}

body.single h1.entry-title {
    word-break: break-word;
}

/* SEARCH */
form.wp-form-search {
    margin: 0 auto 2em;
}

form.wp-form-search label {
    display: none;
}

.search-wrapper {
    width: 100%;
    position: relative;
    padding: 2px;
    background: linear-gradient(89.75deg, #7C0B70 2.35%, #006066 32.95%, #430F78 65.45%, #0058A9 94.13%), linear-gradient(180deg, rgba(124, 11, 112, 0.5) 0%, rgba(223, 173, 214, 0) 100%);
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    -ms-border-radius: 3em;
    -o-border-radius: 3em;
    border-radius: 3em;
    z-index: 3;
}

form.wp-form-search .search-wrapper input {
    width: 100%;
    height: calc(50px + 25 * (100vw - 1024px)/ (1920 - 1024));
    padding: 16px 32px;
    font-size: 24px;
    background-color: #000000de;
    color: #0076AA;
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    -ms-border-radius: 3em;
    -o-border-radius: 3em;
    border-radius: 3em;
}

button.search_button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(180px + 56 * (100vw - 1024px)/ (1920 - 1024));
    font-weight: 500;
    font-size: calc(20px + 4 * (100vw - 1024px)/ (1920 - 1024));
    line-height: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background: linear-gradient(100.2deg, #FF00CF -12.96%, #0FB5FE 113.22%);
    background-size: 100%;
    transition-duration: .5s;
    -webkit-border-radius: 150px 75px 75px 0px;
    -moz-border-radius: 150px 75px 75px 0px;
    -ms-border-radius: 150px 75px 75px 0px;
    -o-border-radius: 150px 75px 75px 0px;
    border-radius: 150px 75px 75px 0px;
}

button.search_button:hover {
    background-size: 200%;
    transition-duration: .5s;
}

@media (max-width:512px) {
    form.wp-form-search .search-wrapper input {
        font-size: 16px;
        padding: 1em;
    }
}

/* CATEGORIES  */
div.video-swiper,
div.swiper {
    position: static;
    width: 100%;
    margin-top: 1em;
    padding: 0;
    overflow-x: visible;
}

div.categories {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    pointer-events: auto;
    z-index: 10;
}

aside.widget-area-2.clients-testimonials {
    text-align: center;
}

aside.widget-area-2.clients-testimonials img {
    max-width: 200px;
}

aside.top-video .video-swiper span.left-btn,
aside.top-video .video-swiper span.right-btn,
div.categories span.left-btn,
div.categories span.right-btn {
    position: absolute;
    z-index: 10;
    min-width: calc(68px + 28 * (100vw - 360px)/ (1920 - 360));
    min-height: calc(68px + 28 * (100vw - 360px)/ (1920 - 360));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #36012ccf;
    opacity: 1;
    transition-duration: 1s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

aside.top-video .video-swiper span.left-btn,
aside.top-video .video-swiper span.right-btn {
    top: 30%;
    background: #0000009e;
}

aside.top-video .video-swiper span.left-btn,
div.categories span.left-btn {
    right: calc(-1em + 8px);
    z-index: 11;
}

aside.top-video .video-swiper span.right-btn,
div.categories span.right-btn {
    left: -1em;
}

aside.top-video .video-swiper span.left-btn svg,
aside.top-video .video-swiper span.right-btn svg,
div.categories span.left-btn svg,
div.categories span.right-btn svg {
    width: calc(48px + 12 * (100vw - 1024px)/ (1920 - 1024));
    aspect-ratio: 1/1;
    height: calc(48px + 12 * (100vw - 1024px)/ (1920 - 1024));
    padding: 20%;
    fill: #036591;
    cursor: pointer;
}

aside.top-video .video-swiper span.left-btn svg,
aside.top-video .video-swiper span.right-btn svg {
    fill: #fff;
}

aside.top-video .video-swiper span.left-btn svg:hover,
aside.top-video .video-swiper span.right-btn svg:hover,
div.categories span.left-btn svg:hover,
div.categories span.right-btn svg:hover {
    fill: #0076AA;
}

.categories ul {
    display: flex;
    width: 100%;
    position: relative;
    left: 0;
    transition-duration: .5s;
    cursor: e-resize;
}

.categories ul li span {
    padding: 4px;
    display: flex;
    background: linear-gradient(rgba(124, 11, 112, 0.5) 0%, rgba(223, 173, 214, 0) 100%);
    flex-grow: 1;
    justify-content: center;
    width: min-content;
    -webkit-border-radius: 90px 90px 10px 10px;
    -moz-border-radius: 90px 90px 10px 10px;
    -ms-border-radius: 90px 90px 10px 10px;
    -o-border-radius: 90px 90px 10px 10px;
    border-radius: 90px 90px 10px 10px;
}

.categories ul li {
    padding-inline-end: 1em;
}

.categories ul li:hover {
    -webkit-transform: translateY(-.3em);
    -moz-transform: translateY(-.3em);
    -ms-transform: translateY(-.3em);
    -o-transform: translateY(-.3em);
    transform: translateY(-.3em);
}

.categories ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(65px + 28 * (100vw - 1024px)/ (1920 - 1024));
    background: linear-gradient(180deg, #04091B 0%, rgba(4, 9, 27, 0) 100%);
    font-family: 'Coldiac Free Regular', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    font-size: calc(20px + 4 * (100vw - 1024px)/ (1920 - 1024));
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    color: #FFFFFF;
    padding: 0 2em;
    z-index: 3;
    -webkit-border-radius: 90px 90px 10px 10px;
    -moz-border-radius: 90px 90px 10px 10px;
    -ms-border-radius: 90px 90px 10px 10px;
    -o-border-radius: 90px 90px 10px 10px;
    border-radius: 90px 90px 10px 10px;
}

/* pagination */
.at-pagination {
    width: 100%;
	margin-top: 2rem;
}

.at-pagination span.page-numbers.current {
    color: #0076aa;
}

.at-pagination nav {
    width: max-content;
    margin: auto;
    display: flex;
	gap: .35em;
}

.at-pagination nav> :nth-child(n) {
    padding: 0.35em;
}

.at-pagination svg {
    vertical-align: middle;
}

.at-pagination svg.before {
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

/* PAGE BACKGROUND  */
article.background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

article.background>div {
    position: absolute;
    z-index: -1;
}

article.background .ellipse-1 {
    width: 90vw;
    aspect-ratio: 1/1;
    height: 90vw;
    right: -20vw;
    top: -45vh;
    background: radial-gradient(61.7% 93.16% at 75.24% -7.08%, rgba(80, 80, 80, 0.5) 0%, rgba(120, 0, 230, 0.5) 0.2%, rgba(255, 0, 207, 0) 100%);
}

article.background .ellipse-3 {
    width: 1735px;
    aspect-ratio: 1/1;
    height: 1735px;
    left: 1168px;
    top: 445px;
    background: radial-gradient(30.67% 31.11% at 32.96% 44.52%, rgba(44, 78, 221, 0.35) 0%, rgba(44, 78, 221, 0) 100%);
}

article.background .ellipse-4 {
    width: 2322px;
    aspect-ratio: 1/1;
    height: 2322px;
    left: calc(100% * 961 / 1920);
    top: calc(100% * -925 / 970);
    background: radial-gradient(48.68% 48.68% at 36.17% 42.21%, rgba(4, 240, 255, 0.25) 0%, rgba(67, 4, 105, 0) 79.09%);
}

article.background .ellipse-7 {
    width: 90vw;
    aspect-ratio: 1/1;
    height: 90vw;
    right: -35vw;
    bottom: -40vw;
    background: radial-gradient(28.01% 29.47% at 57.65% 50%, rgba(255, 0, 207, 0.085) 0%, rgba(255, 0, 207, 0.125) 0.01%, rgba(255, 0, 207, 0) 100%);
}

article.background .ellipse-8 {
    width: 90vw;
    aspect-ratio: 1/1;
    height: 90vw;
    left: -45%;
    bottom: -43vw;
    background: radial-gradient(28.01% 29.47% at 57.65% 50%, rgba(0, 24, 153, 0.125) 0%, rgba(0, 43, 153, 0.25) 0.01%, rgba(0, 43, 153, 0) 100%);
}

/* FLEX */
body:not(.archive) .is-layout-flex.cg-5 {
    column-gap: 5rem;
    margin-top: 2rem;
}

@media screen and (max-width:1023px) {

    aside.top-video .video-swiper span.left-btn,
    div.categories span.left-btn {
        right: -1em;
    }
}

@media screen and (min-width:768px) {
    .is-layout-flex.cg-5 .wp-block-image {
        width: 90%;
        max-width: 450px;
        margin-left: auto;
        margin-right: 0;
    }
}

@media screen and (max-width:512px) {
    .categories ul li a {
        font-size: 14px;
    }
}