/**
Theme Name: Iro-Iro
Author: Sagittarius Group
Author URI: https://sagittariusgroup.ru/
Description: Шаблон для сайт по цветам 72 японских сезонов.  
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Shippori+Mincho&display=swap');
p.wp-block-paragraph {
    font-size: 15px;
}
.row {display: block;
      float: none;
      clear: both}
.col-md-1 {display: inline-block; width: 8%}
.col-md-2 {display: inline-block; width: 16%}
.col-md-3 {display: inline-block; width: 25%}
.col-md-4 {display: inline-block; width: 33%}
.col-md-5 {display: inline-block; width: 40%}
.col-md-6 {display: inline-block; width: 50%}
.col-md-7 {display: inline-block; width: 60%}
.col-md-8 {display: inline-block; width: 66%}
.col-md-9 {display: inline-block; width: 75%}
.col-md-10 {display: inline-block; width: 83%}
.col-md-11 {display: inline-block; width: 90%}
.col-md-12 {display: inline-block; width: 100%}

.season {
	position: absolute;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100vw;
    z-index: 300;
    padding-top: 10vh;
    padding-left: 10vw;
	padding-right: 10vw;
	color: #1C1C1C;
	font-family: "Montserrat", sans-serif;
	transition: background-color 0.5s ease-in-out;
}

.season h1 {
    font-family: "Playfair Display", serif;
    margin: 7px 0 2vh 0;
    font-weight: 200;
}
p.season-label {
    font-size: 12px;
    color: #1C1C1C;
}
p.romaji {
    color: #1C1C1C;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.season a {color: #1c1c1c; text-decoration: none; font-weight: 600 }
h2.kanji, hiragana {font-family: "Shippori Mincho", serif;}
h2.kanji {
    margin: 3px 0 7px 0;
    font-weight: 100;
    font-size: 27px;
    letter-spacing: 5px;
}

.small-kanji {font-family: "Shippori Mincho", serif; font-weight: 400}
p.hiragana {
    letter-spacing: 5px;
    font-size: 10px;
    color: #1C1C1C;
}
.descr {display: inline-block; margin: 5px 0 15px 0 !important}
.sub-name {    
    line-height: 20px;
    font-size: 18px;
    font-weight: 600;}

.date {
    display: block;
    width: 20vw;
    margin: 20px 0 20px 0;
    padding-bottom: 20px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 12px;
    border-bottom: 1px solid #C1C1C1;
}

.season h3 {
    font-size: 17px;
}

section.hero {
    padding-top: 0;
    margin-bottom: 2vh;
}
span.color-small {
    margin-top: 5px;
    display: inline-block;
    width: 30px;
    height: 30px;
   
}

.season p {margin: 10px 0}

article {
    display: block;
    font-size: 12px;
    line-height: 18px;
    clear: both;
    float:none; 
    margin-bottom: 10px;
    width: 35vw;
}

.text-block {
    display: inline-block;
    width: 45vw;
}
.picture-block {
    display: inline-block;
    width: 34vw;
}

.picture-block.color 
{width: 25vw;}
h3.taxonomy-title {
    width: 50%;
    font-size: 12PX;
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 2vh;
    margin-bottom: 2vh;
    border-bottom: 1px solid #c1c1c1;
}

.taxonomies .col-md-3 {
    padding-right: 50px;
    width: 23%;
    border-right: 1px solid #c1c1c1;
    margin-right: 2%;
    font-size: 12px;
    min-height: 45vh;
    margin-bottom: 5vh;
}

img.taxonomy-pic {
    max-height: 150px;
    width: auto;
    padding: 20px 0;
}

section.carousel {
    width: 70%;
    display: block;
    padding: 20px 30px 50px 0;
	margin: 0 auto;
}

.season #content-footer-section {
    display: none;
}

.swiper-button-next, .swiper-button-prev {
   color: #666 !important;
}

 /* Параллакс секция */
        .hero { display: flex; align-items: center; justify-content: space-between; height: 80vh; overflow: hidden; }
        .bird-parallax { width: 500px; height: 500px; background: no-repeat center/contain; position: relative; }
        .bird-fly { position: absolute; top: 50px; left: 50px; width: 300px; transition: transform 0.1s; }
        
        /* Карусель */
        .swiper { width: 100%; padding: 40px; }
        .swiper-slide img { width: 100%; cursor: pointer; }

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom: var(--swiper-pagination-bottom, 0px) !important; }
.swiper-button-next, .swiper-rtl .swiper-button-prev {
	right: var(--swiper-navigation-sides-offset, 0) !important;}
.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #000 !important;
}


.arrow {
    font-size: 30px;
    font-weight: 100;
}
.preview-pic {
    width: auto;
    height: 60px;
}
.preview-pic img {
    width: 60px;
}

.preview-text h4 {
    font-size: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 11px;
}
.preview-text {
	padding: 5px 0;
    font-size: 10px;
	line-height: 11px;
}

.preview-text.kanji {
	font-size: 15px;
}

section.bottom {    display: block;
    width: 100%;
    height: 30vh;
    margin-bottom: 44px;}

@media screen and (max-width:740px)
{   .hero
	{display: block;
	 height: auto;}
	h1 {font-size: 30px;}
	
	.text-block, .picture-block
	{ display: block;
	  padding: 0;
	  width: 90vw;
	  margin: 0 auto;	
	}
	article 
	{width: 85vw;}
	
	.bird-parallax {
		width: 100%;}
	.taxonomies .col-md-3, .carousel 
	{
		width: 100%;
	}
	.taxonomies .col-md-3{
	border-right: none;	
	border-bottom: 1px solid #c1c1c1;
	}
	
	section.carousel {
    width: 90%;
    display: block;
    padding: 0;
    margin: 0 auto;
}
	.col-md-2 
	{width: 45%}
	section.bottom .col-md-8
	{display: none}
	
	section.bottom {
       height: 50vh;
}
	
	.picture-block.color {
    width: 100%;
}
}

/* Главная ndex.php */

body {
            background-color: #FCFAF2;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: serif;
        }
        .logo-main { position: absolute; top: 30px; left: 30px; font-size: 24px; }
        
        .container { position: relative; width: 600px; height: 600px; }

        /* Центральный круг */
    .circle-inner {
    border: 1px solid #a7aaad;
    position: absolute;
    top: 200px;
    left: 200px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #FCFAF2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

        /* 4 сегмента */
.quadrant {
    position: absolute;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
       
.q1 {
    top: 100px;
    left: 300px;
    background: #F9F2EA;
    border-radius: 0 300px 0 0;
   /* border-left: 1px solid #a7aaad; */
}
  .q2 {
    top: 300px;
    left: 300px;
    background: #E0ECD9;
    border-radius: 0 0 300px 0;
 /*   border-top: 1px solid #a7aaad; */
}      

.q3 {
    top: 300px;
    left: 100px;
    background: #FEEFD6;
    border-radius: 0 0 0 300px;
/*	border-right: 1px solid #a7aaad; */
}

.q4 {
    top: 100px;
    left: 100px;
    background: #E7EEFF;
    border-radius: 250px 0 0 0;
/*	border-bottom: 1px solid #a7aaad; */
}
.quadrant img {
    width: 100px;
    transform: rotate(-90deg);
    position: relative;
    top: 30%;
    left: 25%;
}

        /* 72 сегмента */
        .outer-text {
            position: absolute; top: 0; left: 0; width: 600px; height: 600px;
        }
        .segment {
           text-orientation: upright;
           writing-mode: vertical-lr;
           direction: revert;
           position: absolute;
           width: 2px;
		   top: 90px;
           height: 210px;
           left: 300px;
           transform-origin: bottom;
          }
        .segment span { position: absolute; top: -75px; left: -5px; font-size: 10px;  transition: transform 0.25s ease; }

        .segment:hover {border-right: 1px solid #a7aaad; border-top: 1px solid #a7aaad;}
        .segment:hover span { transform: translateY(-15px);}
         
        .today::before {	
         content: "";
         display: block;
         position: absolute;
         top: -20%;
         left: 2px;
         width: 0;
         height: 0;
         border-top: 10px solid #cf2e2e;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
        }
 .today:hover { transform: translateY(-10px);}
        /* Названия сезонов */
        .label { position: absolute; text-align: center; font-family: "Montserrat"; font-weight: 300; text-transform: uppercase}
        .top {  top: -35px; left: 280px;}
        .right { top: 280px; right: -90px; }
        .bottom { bottom: -35px; left: 270px; }
        .left { top: 280px; left: -90px; }