﻿
.programming { }
.programming .slogan{ font-size:1.4rem; color:var(--color03); margin:15px 0 15px 15px; position:relative; }
.programming .slogan::before {
  content: "„";
  margin-right: 5px;
}

.programming .slogan::after {
  content: "“";
  margin-left: 5px;
}

.programming .box1 { max-width:1000px }
.programming .box1 h1{ margin-bottom:0; margin-top:50px; margin-bottom:30px; }
.programming .box1 .image-content .ico{ width:340px; height:340px; display:block; border-radius:170px; border:10px solid var(--color10);
                                   box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
overflow:hidden;
transition: transform 0.8s ease;
  transform-origin: center; margin-top:5px; margin-left:60px; background-image:url(/images/programming-lg.webp); background-repeat:no-repeat; background-size:cover; }

.programming .box1 .slogan { margin-top:30px; }
.programming .box2 { margin-top:60px; background-color:var(--color04); padding:30px 0; }
.boxes { display:flex; flex-wrap:nowrap; justify-content:center;  }
.boxes .box{ width:300px; margin:25px; }
    .boxes .box .content { border-radius:30px; background-color:var(--color10); padding:15px; text-align:center; }
.boxes .box .ico{ width:100px; height:100px; display:block; margin:15px auto; border-radius: 50px; background-color:var(--color01); text-align:center; }
.boxes .box .ico i{ font-size:30px; line-height:100px; color:var(--color10); }
.programming .box3 { padding:60px 0; }
.programming .box4 { padding:60px 0; }
.programming .buttons { justify-content:center; padding:30px 0; }
.programming .buttons .button { margin:0 15px; }
.programming .box5 { margin-top:60px; background-color:var(--color04); padding:30px 0 30px 0; }
.programming .box5 .buttons { margin-top:30px; }
.programming .box6 { padding:60px 0; }
.programming .box6 .text2{  }
.programming .box6 .text2 .ring{ 
    width: 180px;
    height: 180px;
    display: block;
    border-radius: 90px;
    border: 10px solid var(--color10);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.8s ease;
    transform-origin: center;
    margin-top: 5px;
    margin-left: 10px; margin-right:30px;
    background-image: url(/images/michal-greif2.webp);
    background-repeat: no-repeat;
    background-size: 180px;
    background-position:center;
}
.programming .box6 .text2 .flex{ vertical-align:middle; }
.programming .box6 .text2 .owner { padding-top:30px; }
.programming .box6 .text2 .owner strong{ color:var(--color01); font-size:1.2em; }
.programming .box6 .text2 .owner .name{ color:var(--color03); }

.programming .boxes-numberlist { display:flex; flex-wrap:wrap; justify-content:center; }
.programming .boxes-numberlist .box{ display:flex; flex-wrap:nowrap; background-color:var(--color10); border-radius:30px; padding:15px;
                                     /*border:1px solid var(--color03);*/ width:30%; 
}
.programming .boxes-numberlist .box .ico{ width:50px; height:50px; display:block; margin:15px auto; border-radius: 25px; background-color:var(--color01); text-align:center;
                                          color:var(--color10); font-size:1.4rem; line-height:50px; font-weight:600; margin-right:15px; }
.programming .boxes-numberlist .box .text{  }
.programming .boxes-numberlist .boxline { width:5%; position:relative; display:flex; min-height:100%; vertical-align:middle; }
.programming .boxes-numberlist .boxline .line{ position:absolute; width:100%; height:10px; background-color:var(--color10); top:30px; }
.programming .boxes-numberlist div:nth-child(6) {
  width:100%; height:60px;
}
.programming .boxes-numberlist div:nth-child(6) .line {
  width:10px; height:60px; margin:0; top:0; right:30px;
}
.programming .boxes-numberlist div:nth-child(7) {
  order:11;
}
.programming .boxes-numberlist div:nth-child(8) {
  order:10;
}
.programming .boxes-numberlist div:nth-child(9) {
  order:9;
}
.programming .boxes-numberlist div:nth-child(10) {
  order:8;
}
.programming .boxes-numberlist div:nth-child(8) .line,.programming .boxes-numberlist div:nth-child(10) .line {
  top:auto; bottom:30px;
}

.programming .box5 h2 { margin-bottom:60px; }


    
