/*
 * Theme Name: Links to Websites
 * Theme URL: Several Sites
 * Description: Theme for Fiollent sites
 * Author: Astra GOST
 * Version: 1.0
 * Date: 2025-12-08
 * Modified version: none
 * Date modified: none
 */





/* Кодировочка */
@charset "UTF-8";





@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..500&display=swap');





/* Сайты-сателлиты Фиоллента */

.f-site-links_area {
	z-index: 100;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	font-family: 'Oswald', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	text-transform: uppercase;
	text-align: center;
	color: #FFF;
	background: #161616;
	}

.f-site-links_tit {
	float: none;
	display: block;
	width: 100%;
	font-weight: 300;
	font-size: 90%;
	padding: 15px 0;
	text-shadow: 1px 1px 0 #000;
	}

.f-site-links {
	position: relative;
	display: inline-flex;
	box-sizing: border-box;
	border: 2px solid #161616;
	width: 25%;
	padding: 80px 10px;
	}

.f-site-links_prose {
	background: url('../graphics/bg_f-site-links_prose.jpg') no-repeat center,
		linear-gradient(to right, #FEF0B3, #CB9);
	background-size: cover;
	}

.f-site-links_fotokraska {
	background: url('../graphics/bg_f-site-links_fotokraska.jpg') no-repeat center,
		linear-gradient(to right, #606, #250067);
	background-size: cover;
	}

.f-site-links_lomofoto {
	background: url('../graphics/bg_f-site-links_lomofoto.jpg') no-repeat bottom center,
		linear-gradient(to right, #E9E9E9, #8C8C8C);
	background-size: cover;
	}

.f-site-links_esotericism {
	background: url('../graphics/bg_f-site-links_esotericism.jpg') no-repeat center,
		linear-gradient(to right, #6E00C5, #1B016F 75%);
	background-size: cover;
	}

.f-site-links a,
.f-site-links span {
	left: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	overflow: hidden;
	width: 100%;
	height: 100%;
	font-weight: 500;
	font-size: 22px;
	text-align: center;
	text-decoration: none;
	transition: all .5s ease;
	}
.f-site-links a::before {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: -640px;
	content: '';
	width: 320px;
	height: 200px;
	background: linear-gradient(90deg, rgba(255,255,255, .1), rgba(255,255,255, .5));
	transform: skewX(-45deg);
	}
.f-site-links a:hover::before {
	left: 150%;
	transition: .5s ease-in-out;
	}
.f-site-links a:hover,
.f-site-links span {
	background: url('../graphics/bg_f-site-links_frame-1.png') no-repeat top left,
		url('../graphics/bg_f-site-links_frame-2.png') no-repeat top right,
		url('../graphics/bg_f-site-links_frame-3.png') no-repeat bottom left,
		url('../graphics/bg_f-site-links_frame-4.png') no-repeat bottom right;
	}

.f-site-links_prose a,
.f-site-links_prose span {
	color: #900;
text-shadow: 1px 1px 0 #FFF;
	}
.f-site-links_fotokraska a,
.f-site-links_fotokraska span {
	color: #FFF;
	text-shadow: 1px 1px 0 #000;
	}
.f-site-links_lomofoto a,
.f-site-links_lomofoto span {
	color: #666;
	text-shadow: 1px 1px 0 #FFF;
	}
.f-site-links_esotericism a,
.f-site-links_esotericism span {
	color: #FC0;
	text-shadow: 1px 1px 0 #000;
	}





/* ============================================= */
/* =А=Д=А=П=Т=И=В=*=М=Е=Д=И=А=*=З=А=П=Р=О=С=Ы= */
/* ============================================= */





/* Медиазапросы - точка перехода 1920 */

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

.f-site-links {
	padding: 60px 10px;
	}

.f-site-links a,
.f-site-links span {
	font-size: 20px;
	}

	}





/* Медиазапросы - точка перехода 1366 */

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

.f-site-links_tit {
	padding: 10px 0;
	}

.f-site-links {
	padding: 50px 10px;
	}

.f-site-links a,
.f-site-links span {
	font-size: 18px;
	}

	}





/* Медиазапросы - точка перехода 810 */

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

.f-site-links {
	width: 50%;
	}

	}





/* Медиазапросы - точка перехода 480 */

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

.f-site-links {
	padding: 40px 5px;
	}

.f-site-links a,
.f-site-links span {
	font-size: 17px;
	}

	}





/* Медиазапросы - точка перехода 375 */

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

.f-site-links a,
.f-site-links span {
	font-size: 16px;
	}

	}