/* ---- reset ---- */ 
body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; }
 canvas{ display: block; vertical-align: bottom; } 
 /* ---- particles.js container ---- */ 
 #particles-js{ position:fixed; width: 100%; height: 100%; 
    /*background-color: #b61924;*/ background-image: url("i/fon.jpg");
     background-repeat: no-repeat; background-size: cover;
      background-position: 50% 50%; 
      top: 0;
      
    }
    
.title h1{
    text-align: center;
    font-family: "Pacifico", cursive;
    font-size: 20pt;
    color: #9a0000;
    padding: 0;
    margin: 0;
}

.title2 {display: flex;
    justify-content: space-between;}

.txt_title { margin-left: 20px; font-size: 12pt;}

.botton_forma {
    margin-right: 30px;
}
    

.back_fon { background: url(i/back_fon.png) 50% 0 repeat;background-size: cover; width: 100vw; 
    height: 100vh;
    position: fixed;
    z-index: 0; }
    

.fon {
    width: 100vw;
    height: 130vw;
    max-width: 750px;
    max-height: 1000px;
    margin: 0 auto;
    background: url(i/fon.png) 50% 100% no-repeat;
    background-size: contain;
    position: relative;
    padding-top: 80px;
}
.fon2{
    width: 100vw;
    max-width: 750px;
    margin: 0 auto;
    background: url(i/fon2.png) repeat-y;
    background-size: contain;
    position: relative;
}
.content{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.content_block{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}
.toys{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.toy{
    /*border: 1px red solid;*/
    width: 32vw;
    height: 32vw;
    max-width: 245px;
    max-height: 245px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toys_layer_1 {padding: 20px 0; padding-top: 90px;}

.toys_layer_2 .toy:nth-child(1) .toy_block{
    position: relative;
    top: 20px;
}
.toys_layer_2 .toy:nth-child(2) .toy_block{
    position: relative;
    top: -40px;
}

.toys_layer_3 .toy:nth-child(3n-2) .toy_block{
    position: relative;
    top: 40px;
}
.toys_layer_3 .toy:nth-child(3n) .toy_block{
    position: relative;
    top: -80px;
}

.toy_block{
    width:80%;
    max-width: 200px;
    height:80%;
    max-height: 200px;
    /*border: 1px red solid;*/
}

.boll{
    width:100%;
    position: relative;
    cursor: pointer;
}
.boll img{
    width:100%;
    position: absolute;
}
.txt{
    font-family: "Pacifico", cursive;
    text-align: center;
    font-weight: 200;
    font-size: 10pt;
    background: #ffffff9e;
    border-radius: 10px;
    position: relative;
    z-index: 9;
    font-size: 14pt;
    color: #676767;
    line-height: 18px;
}


/* ЦВЕТА ИГРУШЕК */
.color_toy {opacity: 0.5;
    transition: filter .6s ease-in-out;}

.color_red {
    filter: brightness(0) saturate(80%) invert(10%) sepia(138%) saturate(6000%) hue-rotate(360deg) brightness(135%) contrast(100%);
    opacity: 0.6;
}


.color_violet {
    filter: brightness(0) saturate(100%) invert(14%) sepia(89%) saturate(5400%) hue-rotate(275deg) brightness(90%) contrast(105%);
}

.color_green {
    filter:brightness(0) saturate(100%) invert(68%) sepia(33%) saturate(1000%) hue-rotate(67deg) brightness(85%) contrast(95%);
    opacity: 0.8;
}

.color_bordo {
    filter: brightness(0) saturate(100%) invert(13%) sepia(88%) saturate(6200%) hue-rotate(-5deg) brightness(60%) contrast(120%);
}

.color_yellow {
    filter: brightness(0) saturate(100%) invert(86%) sepia(94%) saturate(5200%) hue-rotate(-5deg) brightness(110%) contrast(105%);
    opacity: 0.7;
}

.color_sirenevy {
    filter: brightness(0) saturate(100%) invert(40%) sepia(85%) saturate(3800%) hue-rotate(245deg) brightness(95%) contrast(105%);
}

.color_orange {
    filter: brightness(0) saturate(100%) invert(63%) sepia(82%) saturate(5200%) hue-rotate(-05deg) brightness(125%) contrast(105%);
    opacity: 0.6;
}

.color_goluboy {
    filter: brightness(0) saturate(100%) invert(69%) sepia(25%) saturate(4500%) hue-rotate(175deg) brightness(105%) contrast(100%);
}

.color_salat {
    filter: brightness(0) saturate(100%) invert(86%) sepia(73%) saturate(3600%) hue-rotate(60deg) brightness(120%) contrast(95%);
}

.color_blue {
    filter: brightness(0) saturate(100%) invert(13%) sepia(90%) saturate(4800%) hue-rotate(215deg) brightness(95%) contrast(105%);
}

.color_gold {
    filter: brightness(0) saturate(100%) invert(87%) sepia(50%) saturate(2500%) hue-rotate(330deg) brightness(80%) contrast(200%);
}

.color_beige {
    filter: brightness(0) saturate(100%) invert(92%) sepia(30%) saturate(900%) hue-rotate(328deg) brightness(110%) contrast(95%);
}

.color_brown {
    filter: brightness(0) saturate(100%) invert(29%) sepia(64%) saturate(1900%) hue-rotate(-5deg) brightness(40%) contrast(110%);
}

.color_silver {
    filter: brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(300%) hue-rotate(175deg) brightness(105%) contrast(95%);
}

.color_pink {
    filter: brightness(0) saturate(100%) invert(65%) sepia(42%) saturate(3500%) hue-rotate(319deg) brightness(105%) contrast(100%);
    opacity: 0.6;
}

.color_white {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(120%) contrast(100%);
}


/*  попап пожелания */


.fon_wish{
    height: 100%;
    width: 100%;
    background: url(i/fon_moroz.jpg) 50% 0 repeat-y;
    position: fixed;
    top: 0;
    z-index: 99;
    background-size: cover;
    opacity: 0.0;
    display: none;
    transition: opacity 1.6s ease;   /* ← плавность */
}

.wish_conteiner {
    height: auto;
    width: 100%;
    max-width: 400px;
    position: fixed;
    top: 50%;               /* центрируем */
    left: 50%;
    
    z-index: 999;
    margin: 0 auto;
    opacity: 0.0;
    display: none;
    transition: opacity 0.3s ease, transform 0.2s ease-in-out;
    border-radius: 10px;
    background:  url(i/wish1.jpg) 50% -50px no-repeat, url(i/wish2.jpg) 50% 100% no-repeat;
    background-size: contain, contain;
    min-height: 450px;
    background-color: #fff;
    box-shadow: 4px 4px 30px #05131e;
}
.wish_conteiner_block {
    padding: 160px 30px 100px 30px;
}
.forma_block {display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;}

#boll_f {}
.toy_block_f {position: relative;width: 120px;
    height: 120px;}
.fon_toy_f {position: absolute;left: 0;
    top: 0;}
.type_toy_f {position: absolute;left: 0;
    top: 0;}
.color_toy_f {position: absolute;left: 0;
    top: 0;}
    
.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fade-in.show {
    opacity: 1;
}


#forma_block_submit {}


#wish_txt {
    text-align: justify;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5em;
    /*font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;*/
  padding-bottom: 10px;
}
#wish_txt::first-letter {
    font-size: 300%;
    color: red;
    float: left;
    margin-right: 6px;
    line-height: 0.8;
    font-weight: 800;
}
#wish_ocup, #wish_comp {
    text-align: right;
    font-style: italic;
    font-size: 10pt;
}
#wish_fio {
    text-align: right;
    font-style: italic;
}
#wish_close{
    width: 26px;
    height: 26px;
    position: absolute;
    background: rgb(151, 12, 12);
    top: 5px;
    right: 5px;
    border-radius: 14px;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    caret-color: transparent;
}
#wish_close:hover  {background: rgb(255, 9, 9);}
#wish_close span {
    padding: 8px;
    font-size: 16pt;
    caret-color: transparent;
}




/*  Forma */

.botton_forma{cursor: pointer;
   /* background: #ba001e;*/
     background: url(i/btn.png) 50% 0 repeat;background-size: cover;
    width: 150px;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
    color: white;
    font-weight: 800;
   /* border: 2px #fff solid;*/
    box-shadow: 2px 2px 6px #000000c4;
    font-size: 12pt; height: 50px;
}

.fon_forma{
    height: 100%;
    width: 100%;
    /*background: url(i/fon_moroz.jpg) 50% 0 repeat-y;*/
    background: #000000ad;
    position: fixed;
    top: 0;
    z-index: 99;
    background-size: cover;
    opacity: 0.0;
    display: none;
    transition: opacity 1.6s ease;   /* ← плавность */
}

.forma_conteiner {
    height: auto;
    width: 100%;
    max-width: 400px;
    position: fixed;
    top: 50%;               /* центрируем */
    left: 50%;
    
    z-index: 999;
    margin: 0 auto;
    opacity: 0.0;
    display: none;
    transition: opacity 0.3s ease, transform 0.2s ease-in-out;
    border-radius: 10px;
    background: #fff  url(i/mail.jpg) 50% 0px no-repeat;
    background-size: 100%;
    min-height: 450px;
    box-shadow: 4px 4px 30px #05131e;
}
.forma_conteiner_block {
    padding: 160px 30px 30px 30px;
    
}

.forma_conteiner_block form{text-align: center;}

.forma_conteiner textarea, .forma_conteiner input, .forma_conteiner select {
    margin: 10px 0;
    width: 95%;
    border: 1px #444 solid;
    padding: 5px;
    border-radius: 10px;
    
}

#forma_submit {color: white;
    background: red;
    border: 0;
    padding: 10px;
    width: 200px;}


#forma_close{
    width: 26px;
    height: 26px;
    position: absolute;
    background: rgb(151, 12, 12);
    top: 5px;
    right: 5px;
    border-radius: 14px;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    caret-color: transparent;
}
#forma_close:hover  {background: rgb(255, 9, 9);}
#forma_close span {
    padding: 8px;
    font-size: 16pt;
    caret-color: transparent;
}