/*
Theme Name: Стратегия
Theme URI: https://ostro.su
Author: Остро
Author URI: https://ostro.su
Description: Стратегия is a powerful business theme that provides a fast way for companies or freelancers to create an awesome online presence. As well as being fully compatible with Elementor, Sydney brings plenty of customization possibilities like access to all Google Fonts, full color control, layout control, logo upload, full screen slider, header image, sticky navigation and much more. Also, Sydney provides all the construction blocks you need to rapidly create an engaging front page. Looking for a quick start with Sydney? With just a few clicks, you can import one of our existing demos https://ostro.su
Version: 3.10
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tested up to: 6.6
Requires PHP: 7.2
Text Domain: strategy
Tags: two-columns, right-sidebar, block-styles, custom-colors, custom-background, custom-header, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Sydney is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
*/
@font-face {
	font-family: 'Inter Regular';
	src: url('../strategy/fonts/inter_regular.eot'); /* IE 9 Compatibility Mode */
	src: url('../strategy/fonts/inter_regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('../strategy/fonts/inter_regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('../strategy/fonts/inter_regular.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('../strategy/fonts/inter_regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../strategy/fonts/inter_regular.svg#inter_regular') format('svg'); /* Chrome < 4, Legacy iOS */
}
@font-face {
	font-family: 'Hackensack-Regular';
	src: url('../strategy/fonts/hackensack-regular.eot'); /* IE 9 Compatibility Mode */
	src: url('../strategy/fonts/hackensack-regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('../strategy/fonts/hackensack-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('../strategy/fonts/hackensack-regular.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('../strategy/fonts/hackensack-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../strategy/fonts/hackensack-regular.svg#hackensack-regular') format('svg'); /* Chrome < 4, Legacy iOS */
}
body {
	font-family: 'Inter Regular';
}
h1, h2, h3, h4, h5, h6, .site-title {
    font-family: 'Hackensack-Regular';
	font-weight: 100;
}
.preloader .spinner {
    height: 58px;
    left: 50%;
    margin-left: -25px;
    margin-top: -29px;
    position: relative;
    top: 50%;
    width: 50px;
}
.preloader .column1 {
    -webkit-animation: 2s ease 0s normal none infinite high;
    animation: 2s ease 0s normal none infinite high;
    background-color: #dcdcdc;
    height: 15px;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 10px;
}
.preloader .column2 {
    -webkit-animation: 2s ease 0s normal none infinite high;
    animation: 2s ease 0s normal none infinite high;
    background-color: #949494;
    height: 28px;
    left: 7px;
    position: absolute;
    bottom: 0;
    width: 10px;
}
.preloader .column3 {
    -webkit-animation: 2s ease 0s normal none infinite high;
    animation: 2s ease 0s normal none infinite high;
    background-color: #ff4013;
    height: 53px;
    left: 12px;
    position: absolute;
    bottom: 0;
    width: 10px;
}
.preloader .column4 {
    -webkit-animation: 2s ease 0s normal none infinite high;
    animation: 2s ease 0s normal none infinite high;
    background-color: #dcdcdc;
    height: 40px;
    left: 21px;
    position: absolute;
    bottom: 0;
    width: 9px;
}
.preloader .column5 {
    -webkit-animation: 2s ease 0s normal none infinite high;
    animation: 2s ease 0s normal none infinite high;
    background-color: #e73a11;
    height: 25px;
    left: 27px;
    position: absolute;
    bottom: 0;
    width: 8px;
}
.preloader .column6 {
    -webkit-animation: 2s ease 0s normal none infinite high;
    animation: 2s ease 0s normal none infinite high;
    background-color: #dcdcdc;
    height: 47px;
    left: 31px;
    position: absolute;
    bottom: 0;
    width: 5px;
}
.preloader .column7 {
    -webkit-animation: 2s ease 0s normal none infinite high;
    animation: 2s ease 0s normal none infinite high;
    background-color: #e73a11;
    height: 38px;
    left: 36px;
    position: absolute;
    bottom: 0;
    width: 10px;
}
.preloader .column8 {
    -webkit-animation: 2s ease 0s normal none infinite high;
    animation: 2s ease 0s normal none infinite high;
    background-color: #949494;
    height: 58px;
    right: 0;
    position: absolute;
    bottom: 0;
    width: 9px;
}
.preloader .column2, .preloader .column4, .preloader .column6, .preloader .column8 {
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s
}
.preloader .column3, .preloader .column7 {
    -webkit-animation-delay: -.3s;
    animation-delay: -.3s
}
@-webkit-keyframes high {
    0%,100%,20%,50%,80% {
        height: inherit;
    }

    40% {
        height: 50%;
    }

    60% {
        height: 25%;
    }
}
}

@keyframes high {
    0%,100%,20%,50%,80% {
        height: inherit;
    }

    40% {
        height: 50%;
    }

    60% {
        height: 25%;
    }
}
@keyframes shake {
  0% {
    transform: translateY(0) scale(1.005);
  }
  15% {
    transform: translateX(-5px) translateY(-5px) scale(1.009);
  }
    30% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0) scale(1.005);
  }
  100% {
    transform: translateY(0) scale(1.005);
  }
}

figure.back_image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
	z-index: 0;
	overflow: hidden;
}
figure.back_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	animation: shake;
	animation-duration: 8s; 
	animation-timing-function: ease-in-out;
	animation-delay: 4s;
	animation-iteration-count: infinite;
}
figure.back_image:before {
    content: '';
    display: block;
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.2) 0%, #000000 70%);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: +1;
    position: absolute;
}
body:not(.sticky-header-active) .shfb .site-branding .site-title a, body:not(.sticky-header-active) .shfb .site-branding .site-description, body:not(.sticky-header-active) .shfb .main-navigation a, body:not(.sticky-header-active) .shfb .main-navigation a:visited, body:not(.sticky-header-active) .shfb-component-search .header-search svg, body:not(.sticky-header-active) .shfb-component-mobile_hamburger .menu-toggle svg {
    color: #fff;
	fill: #fff;
}
.sticky-header-active .has-sticky-header .shfb-main_header_row {
	background-color: rgb(255 255 255 / 76%);
	backdrop-filter: blur(.5625rem);
}
.page .entry-header, .single .entry-header {
    margin-bottom: 0;
    width: 100%;
    text-align: center;
    height: 90vh;
    display: flex;
    align-items: center;
	justify-content: space-around;
}
.page .entry-header h1, .single .entry-header h1 {
    color: #fff;
    font-size: 10vh !important;
	margin-bottom: 10vh;
}
.single .entry-thumb {
	display: none;
}
.shfb-header.shfb-desktop, .shfb-header.shfb-mobile {
    z-index: 999;
}
.button, a.excerpt-more {
color: var(--sydney-global-color-8) !important;
background-color: var(--sydney-global-color-2);
border-color: var(--sydney-global-color-2);
text-transform: uppercase;
font-size: 14px;
border-radius: 6px;
padding:12px  35px;
    text-shadow: none;
    display: block;
    max-width: 160px;
    margin: auto;
	line-height: normal;
}
#head_secondary {
    background-color: transparent;
    padding: 0;
    border-radius: 6px;
    box-shadow: #ffffff69 1px 1px 3px 3px;
	max-width: 450px;
    flex-basis: 30%;
}
#custom_html-2 h3 {
    text-align: center;
    font-size: 5vw;
}
#custom_html-2 .col-md-6>div {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
	margin-bottom: 20px;
	justify-content: end;
}
#custom_html-2 svg {
    height: 30px;
	margin-right: 10px;
}
#custom_html-2 .col-md-6>div>* {
	margin-bottom: 0;
}
.display-posts-listing.grid .listing-item {
	position: relative;
	margin-bottom: 20px;
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.2) 0%, #000000 70%);
	border-radius: 6px;
}
.display-posts-listing.grid .title {
    font-size: 36px;
    font-family: 'Hackensack-Regular';
    text-transform: uppercase;
    margin-bottom: 30px;
    color: #ffffff !important;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    text-align: center;
    text-shadow: #000 2px 2px 6px;
}
.display-posts-listing.grid .image {
    -webkit-box-shadow: 0px 0px 12px 6px rgba(163, 117, 89, 0.1) inset;
    -moz-box-shadow: 0px 0px 12px 6px rgba(163, 117, 89, 0.1) inset;
    box-shadow: 0px 0px 12px 6px rgba(163, 117, 89, 0.1) inset;
    display: block;
	opacity: .8;
}

.display-posts-listing.grid img { 
	display: block; 
	max-width: 100%;
    width: 100%; 
	height: 370px;
    object-fit: cover;
	border-radius: 6px;
}
.display-posts-listing.grid .excerpt-dash {
    position: absolute;
    top: 140px;
    left: 20%;
    right: 20%;
    background: #ffffffad;
    height: 2px;
    border-radius: 1px;
}
.display-posts-listing.grid .excerpt {
	position: absolute;
    top: 150px;
    left: 0;
    right: 0;
	text-shadow: #000 2px 2px 6px;
	color: #fff;
    text-align: center;
    padding: 0 20px;
	height: 220px;
}
.excerpt-more {
	position: absolute;
    bottom: 30px;
    left: calc(50% - 80px);
    width: 160px;
}


@media (min-width: 575px) {

	.display-posts-listing.grid {
		overflow: hidden;
		width: 100%;
	}

	.display-posts-listing.grid .listing-item {
		float: left;
		width: 23.5%;
		margin-left: 2%;
	}

	.display-posts-listing.grid .listing-item:nth-child(4n+1) {
		clear: both;
		margin-left: 0;
	}
}

/* адаптивная часть */
@media (max-width: 575px) {
    .shfb-header .shfb-main_header_row .shfb-column-1 {
        grid-column: 1 / -1;
    }
	.page .entry-header, .single .entry-header {
    flex-direction: column;
}
}