@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

header > .navbar > .container > div > a{margin:0px 15px;text-decoration:none;}

.container-fluid{width:1860px;}
.familytree{}

.genm{background-color:lightblue;}
.genf{background-color:lightpink;}




/* Page FT 1 -------------------------------------------------------------------------- */

body > main > .container-fluid > .familytree > .row > .col > .card.genm > .cardname{}
body > main > .container-fluid > .familytree > .row > .col > .card.genf > .carddate{}

.card{margin:15px auto 15px;padding:5px;font-size:12px;width:120px;min-height:100px;text-align:center;}

.cardname{}
.carddate{}
.row .card{position:relative;justify-content:center;}

.card i{position:absolute;content:"";top:-15px;right:-10px;font-size:30px;color:#198754;transition:.5s;}
.card a i:hover{color:#05515F;transform: scale(1.3);}

/* gen1 */
.gen1{position:relative;margin-top:30px;padding-bottom:30px;xxxoutline:1px solid rgba(0,0,0,.1);}
.gen1:after{position:absolute;content:"";background:#999;top:145px;left:80px;width:774px;height:2px;}
.gen1 .genm::before{position:absolute;content:"";background:#999;top:50px;left:298px;width:2px;height:80px;}
.gen1 .genm::after{position:absolute;content:"";background:#999;top:50px;left:118px;width:180px;height:2px;}
.gen1 .genf::after{position:absolute;content:"";background:#999;top:50px;left:-180px;width:180px;height:2px;}

/* gen2 */
.gen2{position:relative;padding-bottom:15px;}
.gen2 .card:before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.col:nth-child(1) .gen2 .col:nth-child(1) .card::after{position:absolute;content:"";background:#999;top:98px;left:60px;width:2px;height:30px;}
.col:nth-child(2) .gen2 .col:nth-child(1) .card::after{position:absolute;content:"";background:#999;top:98px;left:60px;width:2px;height:30px;}

/* gen3 */
.gen3{position:relative;padding-top:15px;padding-bottom:15px;xxxoutline:1px solid red;}
.gen3 .col:nth-child(4){margin-right:200px;}
.gen3:before{position:absolute;content:"";background:#999;top:0px;left:78px;width:1646px;height:2px;}
.gen3 .col:nth-child(1) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen3 .col:nth-child(4) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen3 .col:nth-child(6) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen3 .col{position:relative;}
.gen3 .col:nth-child(1)::after{position:absolute;content:"";background:#999;top:60px;right:0px;width:2px;height:86px;}
.gen3 .col:nth-child(3)::after{position:absolute;content:"";background:#999;top:60px;right:0px;width:2px;height:86px;}
.gen3 .col:nth-child(5)::after{position:absolute;content:"";background:#999;top:60px;right:0px;width:2px;height:86px;}
.gen3 .col:nth-child(1)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;}
.gen3 .col:nth-child(3)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;} 
.gen3 .col:nth-child(5)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;}

/* gen4 */
.gen4{xxxposition:relative;xxxmargin-left:300px;padding-top:15px;padding-bottom:15px;xxxoutline:1px solid red;}
.gen4 .col:nth-child(1){margin-left:120px;}
.gen4 .col:nth-child(3){margin-left:177px;}
.gen4 .col:nth-child(5){margin-left:352px;}
.gen4 .col:nth-child(1) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen4 .col:nth-child(2) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen4 .col:nth-child(4) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen4 .col:nth-child(6) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen4 .col:nth-child(8) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen4 .col:nth-child(1) .card::after{position:absolute;content:"";background:#999;top:-30px;left:60px;width:155px;height:2px;}
.gen4 .col:nth-child(5) .card::after{position:absolute;content:"";background:#999;top:-30px;left:213px;width:303px;height:2px;}
.gen4 .col{position:relative;}
.gen4 .col:nth-child(3)::after{position:absolute;content:"";background:#999;top:60px;right:0px;width:2px;height:86px;}
.gen4 .col:nth-child(5)::after{position:absolute;content:"";background:#999;top:60px;right:0px;width:2px;height:86px;}
.gen4 .col:nth-child(7)::after{position:absolute;content:"";background:#999;top:60px;right:0px;width:2px;height:86px;}
.gen4 .col:nth-child(3)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;} 
.gen4 .col:nth-child(5)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;}
.gen4 .col:nth-child(7)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;}

/* gen5 */
.gen5{padding-top:15px;padding-bottom:15px;xxxoutline:1px solid red;}
.gen5 .col:nth-child(1){margin-left:675px;}
.gen5 .col:nth-child(2){margin-left:151px;}
.gen5 .col:nth-child(1) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}    /* сверху вертикальные */ 
.gen5 .col:nth-child(2) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen5 .col:nth-child(5) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen5 .col:nth-child(7) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen5 .col:nth-child(2) .card::after{position:absolute;content:"";background:#999;top:-30px;left:60px;width:444px;height:2px;}    /* сверху горизонтальные */
.gen5 .col:nth-child(7) .card::after{position:absolute;content:"";background:#999;top:-30px;left:-21px;width:82px;height:2px;}
.gen5 .col{position:relative;}
.gen5 .col:nth-child(2)::after{position:absolute;content:"";background:#999;top:60px;right:0px;width:2px;height:86px;}            /* между вертикальные */
.gen5 .col:nth-child(4)::after{position:absolute;content:"";background:#999;top:60px;right:0px;width:2px;height:86px;} 
.gen5 .col:nth-child(2)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;}        /* между горизонтальные */
.gen5 .col:nth-child(4)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;}
.gen5 .col:nth-child(6)::before{position:absolute;content:"";background:#999;top:60px;right:-95px;width:192px;height:2px;}

/* gen6 */
.gen6{padding-top:15px;xxxoutline:1px solid green;}
.gen6 .col:nth-child(1){margin-left:971px;}
.gen6 .col:nth-child(2){margin-right:299px;}
.gen6 .col:nth-child(1) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}
.gen6 .col:nth-child(2) .card::before{position:absolute;content:"";background:#999;top:-30px;left:60px;width:2px;height:30px;}

/* Page FT 2 -------------------------------------------------------------------------- */

.generation{margin-top:30px;margin-bottom:60px;}
.generation > div{display:flex;position:relative;}
.pers{padding:5px;width:130px;height:130px;text-align:center;display:flex;flex-direction:column;justify-content:center;border-radius:5px;}
.persname{}
.persdate{}

.generation1 > div:nth-child(1)::before{position:absolute;content:"";background:#999;top:65px;right:-15px;width:30px;height:2px;}      /* между гор   */
.generation1 > div:nth-child(1)::after{position:absolute;content:"";background:#999;top:65px;right:0px;width:2px;height:95px;}         /* между верт  */
.generation1 > div:nth-child(2)::after{position:absolute;content:"";background:#999;top:160px;left:-385px;width:775px;height:2px;}     /* внизу длинная гориз */

.generation2 > div:nth-child(1)::before{position:absolute;content:"";background:#999;top:-30px;left:80px;width:2px;height:30px;}       /* сверху верт */
.generation2 > div:nth-child(4)::before{position:absolute;content:"";background:#999;top:-30px;left:80px;width:2px;height:30px;}
.generation2 > div:nth-child(6)::before{position:absolute;content:"";background:#999;top:-30px;left:80px;width:2px;height:30px;}
.generation2 > div:nth-child(1)::after{position:absolute;content:"";background:#999;top:65px;right:0px;width:2px;height:95px;}  
.generation2 > div:nth-child(2)::before{position:absolute;content:"";background:#999;top:65px;left:-15px;width:30px;height:2px;}
.generation2 > div:nth-child(3)::before{position:absolute;content:"";background:#999;top:65px;right:-15px;width:30px;height:2px;}
.generation2 > div:nth-child(3)::after{position:absolute;content:"";background:#999;top:65px;right:0px;width:2px;height:95px;}
.generation2 > div:nth-child(5)::before{position:absolute;content:"";background:#999;top:65px;right:-15px;width:30px;height:2px;}
.generation2 > div:nth-child(5)::after{position:absolute;content:"";background:#999;top:65px;right:0px;width:2px;height:95px;}
.generation2 > div:nth-child(6)::after{position:absolute;content:"";background:#999;top:160px;left:-2px;width:84px;height:2px;}


.generation3 > div:nth-child(1)::before{position:absolute;content:"";background:#999;top:-30px;left:80px;width:2px;height:30px;}
.generation3 > div:nth-child(1)::after{position:absolute;content:"";background:#999;top:-30px;left:80px;width:75px;height:2px;}
.generation3 > div:nth-child(2)::before{position:absolute;content:"";background:#999;top:65px;left:-15px;width:30px;height:2px;}
.generation3 > div:nth-child(2)::after{position:absolute;content:"";background:#999;top:65px;left:0px;width:2px;height:95px;} 
.generation3 > div:nth-child(3)::before{position:absolute;content:"";background:#999;top:-30px;left:80px;width:2px;height:30px;}
.generation3 > div:nth-child(3)::after{position:absolute;content:"";background:#999;top:-30px;left:80px;width:155px;height:2px;}
.generation3 > div:nth-child(4)::before{position:absolute;content:"";background:#999;top:-30px;left:80px;width:2px;height:30px;}
.generation3 > div:nth-child(5)::before{position:absolute;content:"";background:#999;top:-30px;left:80px;width:2px;height:30px;}

.generation4 > div:nth-child(1)::before{position:absolute;content:"";background:#999;top:-30px;left:80px;width:2px;height:30px;}
.generation4 > div:nth-child(1)::after{position:absolute;content:"";background:#999;top:-30px;left:80px;width:75px;height:2px;}





/* block-bottom */
.block-bottom{margin:100px auto 0px;padding:15px;background:rgba(0,0,0,.1);}





/* banner */
.banner{margin:30px auto 15px;}
.banner{width:300px;height:300px;position:relative;overflow:hidden;background:url('pix/bg.jpg') center/cover no-repeat;font-family:'Arial Black',sans-serif;}
.element{width:100px;height:100px;position:absolute;top:40px;opacity:0;}
.el1{left:20px;animation:flowStep1 5s infinite;}
.el2{right:20px;animation:flowStep2 5s infinite;}
.offer-text{width:100%;text-align:center;position:absolute;bottom:60px;color:#ffffff;font-size:20px;line-height:1.2;text-shadow:2px 2px 4px rgba(0,0,0,.8);opacity:0;animation: flowStep3 5s infinite;}
@keyframes flowStep1 {
0%       {opacity: 0; transform: translateX(-100px);}
15%, 80% {opacity: 1; transform: translateX(0);}
100%     {opacity: 0; transform: translateX(0);}       }
@keyframes flowStep2 {
0%, 25%  {opacity: 0; transform: translateX(100px);}
40%, 80% {opacity: 1; transform: translateX(0);}
100%     {opacity: 0; transform: translateX(0);}       }
@keyframes flowStep3 {
0%, 50%  {opacity: 0; transform: translateY(10px);}
65%, 80% {opacity: 1; transform: translateY(0);}
100%     {opacity: 0;}                                 }