/* pedigree barva #F9B606 */


/* Pro účely simulace */ 

/*.layout-1{
    width: 1195px;
    height: auto;

}

.layout-0{
    width: 920px;
    height: auto;

}

.mobile{
    width: 100vw;
    height: auto;
}*/

/* STYLES */

@font-face {
    font-family: vag;
    src: url(https://i.alza.cz/Foto/LegendFoto/EN/Files/sablona/pedigree/fonts/VAGRoundedLTCYR-Bold.woff);
  }


  @font-face {
    font-family: vag-light;
    src: url(https://i.alza.cz/Foto/LegendFoto/EN/Files/sablona/pedigree/fonts/VAGRoundedLTCYR-Light.woff);
  }

  @font-face {
    font-family: vag-thin;
    src: url(https://i.alza.cz/Foto/LegendFoto/EN/Files/sablona/pedigree/fonts/VAGRoundedLTCYR-Thin.woff);
  }

#celek figure {
    margin: 0px;
}

#celek{
    width: 100%;
    display: flex;
    flex-direction: column;
}

#celek .b1{
    display: flex;
    width: 100%;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat; 
    background-size: 50% 100%;
    


}

/************************* B1 ***********************************************************/

/* B1 ZOBRAZENÍ PRO ČTYŘI SLOUPCE (LAYOUT 1)*/

    #celek .b1{
        flex-direction: row;
        height: 350px;
        padding-bottom: 0%;
        overflow: hidden;
        justify-content: center;
        background: linear-gradient(0deg, #F9B606 65%, #ffff 0%);
    }

    #celek .b1-logos{
        width: 30%;
        position: relative;
        margin-top: 3.5%;
    }

    #celek .b1-logos-bck{
        position: absolute;
        
    }

    #celek .b1-logos-bck img{
        width: 100%;
    }

     #celek .b1-logos-logo{
        position: absolute;
    }

     #celek .b1-logos-logo img{
        width: 100%;
        margin-left: 6%;
        margin-top: -5px;
    }

    #celek .b1-logos-vital{
        position: absolute;
    }

    #celek .b1-logos-vital img{
        width: 100%;
        margin-top: 115%;
        margin-left: 40%;
    }


    #celek .b1-dog{
        width: 35%;
        position: relative;
    }

    #celek .b1-dog-bck{
        position: absolute;
    }

    #celek .b1-dog-bck img{
        width: 95%;
        margin-top: 0%;
        margin-left: 0%;
    }

    #celek .b1-dog-head{
        position: absolute;
        width: 105%;
    }

    #celek .b1-dog-head img{
        width: 105%;
        margin-top: 7%;
        margin-left: -3%;
    }

    #celek .b1-text{
        width: 25%;
        margin-top: 13%;
    }

    #celek .b1-text h2{
        font: 64px vag;
        color: black;
        text-align: center;
        letter-spacing: 1px;
    }



/* B1 ZOBRAZENÍ PRO TŘI SLOUPCE (LAYOUT 0)*/

.layout-0 #celek .b1{
    height: 290px;
}

.layout-0 #celek .b1-logos{
    margin-top: 4%;
}

.layout-0 #celek .b1-logos-logo img{
    width: 85%;
    margin-top: 0px;
}

.layout-0 #celek .b1-logos-vital img{
    width: 85%;
    margin-top: 95%;
    margin-left: 30%;
}

.layout-0 #celek .b1-dog-bck img{
    width: 100%;
    margin-top: 0%;
    margin-left: 0%;
}

.layout-0 #celek .b1-dog-head{
    width: 110%;
}

.layout-0 #celek .b1-dog-head img{
    width: 110%;
    margin-top: 10%;
}

.layout-0 #celek .b1-text{
    margin-top: 15%;
}

.layout-0 #celek .b1-text h2{
    font: 48px vag;
}
/* B1 ZOBRAZENÍ PRO TABLETY, ADMIN A VĚTŠÍ TELEFONY (IPHONE X)*/

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

    .mobile #celek .b1{
        flex-direction: row;
        height: 250px;
    }
    
    .mobile #celek .b1-logos{
        margin-top: 50px;
    }
    
    .mobile #celek .b1-logos-bck img{
        width: 100%;
    }
    
    .mobile #celek .b1-logos-logo img{
        width: 85%;
        margin-left: 6%;
        margin-top: 0px;
    }
    
    .mobile #celek .b1-logos-vital img{
        width: 55%;
        margin-top: 150px;
        margin-left: 35%;
    }
    
    .mobile #celek .b1-dog-bck img{
        width: 100%;
        margin-top: 15px;
    }

    .mobile #celek .b1-dog-head{
        width: 110%;
    }
    
    .mobile #celek .b1-dog-head img{
        width: 110%;
        margin-top: 12%;
    }
    
    .mobile #celek .b1-text{
        margin-top: 100px;
        margin-top: 15%;
    }
    
    .mobile #celek .b1-text h2{
        font: 38px vag;
        padding: 10px;
    }
}

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

    .mobile #celek .b1{
        flex-direction: column;
        height: auto;
        overflow: hidden;
        justify-content: center;
        background: none;
        background-color: white;
    }

    .mobile #celek .b1-logos{
        order: 3;
        background-color: #F9B606;
        text-align: center;
        padding-bottom: 50px;
        width: 100vw;
        margin-top: 0px;
        height: 100vw;
    }

    .mobile #celek .b1-logos-bck{
        display: none;
    }

    .mobile #celek .b1-logos-logo{
        width: 80%;
        margin: 0 auto;
    }

    .mobile #celek .b1-logos-logo img{
        width: 100%;
        margin-left: 6%;
        margin-top: 0px;
    }

    .mobile #celek .b1-logos-vital{
        width: 100%;
    }
    .mobile #celek .b1-logos-vital img{
        width: 40%;
        margin: 0 auto;
        margin-top: 65vw;
    }
   
    .mobile #celek .b1-dog{
        order: 1;
        position: relative;
        height: 250px;
        overflow: hidden;
        background: linear-gradient(0deg, #F9B606 65%, #ffff 0%);
        text-align: center;
        margin-bottom: 10px;
        width: 100%;
    }

    .mobile #celek .b1-dog-bck{
        width: 100%;
        position: absolute;
        bottom: 0px;
    }

    .mobile #celek .b1-dog-bck img{
        width: 300px;
    }

    .mobile #celek .b1-dog-head{
        width: 110%;
        position: absolute;
        bottom: 0px;
    }

    .mobile #celek .b1-dog-head img{
        width: 300px;
        margin-bottom: -5px;
    }

    .mobile #celek .b1-text{
        order: 2;
        background-color: #F9B606;
        margin-bottom: 10px;
        width: 100%;
        margin-top: 0px;
    }

    .mobile #celek .b1-text h2{
        font: 9vw vag;
    }
    
}

/************************* B2 ***********************************************************/

#celek .b2{
    display: flex;
    background-color: #F9B606;
}

#celek .b2 img{
    width: 100%;
}

#celek h2{
    padding: 0px;
}

#celek h3{
    padding: 0px;
}

/* B2 ZOBRAZENÍ PRO TŘI I ČTYŘI SLOUPCE*/ 
    
    #celek .b2{
        flex-direction: row;
        justify-content: space-around;
        padding-bottom: 30px;
        background-color: #F9B606;
        margin-top: 15px;
        margin-bottom: 15px;
        background-image: url(https://i.alza.cz/Foto/LegendFoto/EN/Files/sablona/pedigree/images/b2-pozadi.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    #celek .b2-box{
        width: 25%;
        text-align: center;
        margin-top: 20px;
    }

    #celek .b2-box-pic{
        width: 60%;
        margin: 0 auto;
        margin-top: 10px;
    }

    #celek .b2-box-text{
        width: 100%;
        margin: 0 auto;
    }

    .layout-1 #celek .b2 h3{
        font: 28px vag-light;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
        color: black;
    }

    .layout-1 #celek .b2 h3 strong{
        font: 28px vag;
        color: black;
    }

    .layout-0 #celek .b2 h3{
        font: 22px vag-light;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
        color: black;
    }

    .layout-0 #celek .b2 h3 strong{
        font: 22px vag;
        color: black;
    }

/* B2 ZOBRAZENÍ PRO TABLETY */

@media screen and (max-width:919px) and (min-width:750px){

    .mobile #celek .b2-box{
        margin-top: 0px;
    }

    .mobile #celek .b2-box-pic{
        width: 60%;
        margin-top: 30px;
    }

    .mobile #celek .b2 h3{
        font: 18px vag-light;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
        color: black;
    }

    .mobile #celek .b2 h3 strong{
        font: 18px vag;
        color: black;
    }
}

/* B2 ZOBRAZENÍ PRO MOBILY */

@media screen and (max-width:749px){
    #celek .b2{
        flex-direction: column;
        padding-bottom: 50px;
        background-image: linear-gradient(to bottom, #F9B606, #FBCD67, #F9B606);
    }

    #celek .b2-box{
        width: 100%;
        text-align: center;
    }

    #celek .b2-box-pic{
        width: 50%;
        margin: 0 auto;
        margin-top: 50px;
    }

    #celek .b2-box-text{
        width: 80%;
        margin: 0 auto;
    }

    #celek .b2 h3{
        font: 8vw vag-light;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
        color: black;
    }

    #celek .b2 h3 strong{
        font: 8vw vag;
        color: black;
    }
}

/************************* B3 ***********************************************************/

#celek .b3{
    display: flex;
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    padding-bottom: 0px !important;
    height: auto;
    overflow: hidden;

}

#celek h2{
    padding: 0px;
}

#celek h3{
    padding: 0px;
}

/************************* B3 ***********************************************************/

#celek .b3{
    display: flex;
    background-color: white;
    height: auto;
}

/* b3 PRO ČTYŘI SLOUPCE*/

#celek .b3{
    flex-direction: column;
    background-image: url(https://i.alza.cz/Foto/LegendFoto/EN/Files/sablona/pedigree/images/b3-pozadi.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 20px;
}
#celek .b3-upper{
    text-align: center;
}

.b3-upper h3{
    font: 38px vag;
    color: black !important;
    margin-top: 10px;
    margin-left: -20%;
}

#celek .b3-lower{
    width: 100%;
    height: 340px;
    display: flex;
    flex-direction: row;
    margin-top: -40px;
}

 #celek .b3-lower-left{
    width: 25%;  
    position: relative;
}

 #celek .b3-lower-left-icon{
    position: absolute;
    top: 20px;
    left: 20px;
}

 #celek .b3-lower-left-icon img{
    width: 80%;
}

 #celek .b3-lower-left-image{
    position: absolute;
    right: 0px;
}

 #celek .b3-lower-left-image img{
    width: 95%;
    margin-left: -30%;
    margin-top: -5%;
}

 #celek .b3-lower-middle{
    width: 25%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

 #celek .b3-lower-middle-text{
    width: 40%;
    position: relative;
}

#celek .b3-lower-middle-text-wrap{
    position: absolute;
    top: 160px;
    width: 65%;
}

#celek .b3-lower-middle-text p{
    font: 24px vag;  
    color: black;
    margin-top: 0px;
    margin-bottom: 10px;
}

#celek .b3-lower-middle-icons{
    width: 40%;
    position: relative;
}

#celek .b3-lower-middle-icons img{
    position: absolute;
    width: 80%;
    right: 20px;
    top: 170px;
}

 #celek .b3-lower-right{
    width: 50%;  
    position: relative;
}

 #celek .b3-lower-right img{
    width: 95%;
    position: absolute;
    left: 0px;
    top: 70px
}

/* B3 PRO TŘI SLOUPCE*/

.layout-0 .b3-upper h3{
    font: 32px vag;
    margin-top: 0px;
}

.layout-0 #celek .b3-lower{
    height: 270px;
}

.layout-0 #celek .b3-lower-left-icon{
    top: 15px;
}

.layout-0 #celek .b3-lower-left-image img{
    width: 75%;
    margin-left: 0px;
}

.layout-0 #celek .b3-lower-middle-text{
    width: 40%;
    position: relative;
}

.layout-0 #celek .b3-lower-middle-text-wrap{
    top: 120px;
}

.layout-0 #celek .b3-lower-middle-text p{
    font: 20px vag;  
}

.layout-0 #celek .b3-lower-middle-icons img{
    right: 15px;
    top: 135px;
}

.layout-0 #celek .b3-lower-right img{
    top: 60px
}

/* B3 ZOBRAZENÍ PRO TABLETY */

@media screen and (max-width:919px) and (min-width:749px){
    
    .mobile #celek .b3-upper{
        width: 100%;
    }
    
    .mobile #celek .b3-upper h3{
        font: 28px vag;
        text-align: center;
        margin-bottom: 20px;
        margin-left: -23%;
    }
    
    .mobile #celek .b3-lower{
        background-size: contain;
        background-repeat: no-repeat;
        height: 27vw;
    }
    
    .mobile #celek .b3-lower-left-icon{
        top: 10px;
        left: 10px;
    }
    
    .mobile #celek .b3-lower-left-icon img{
        width: 50%;
    }
    
    .mobile #celek .b3-lower-left-image img{
        width: 18vw;
        margin-top: -3vw;
        margin-right: 0;
    }
    
    .mobile #celek .b3-lower-middle-text{
        width: 50%;
    }
    
    .mobile #celek .b3-lower-middle-text-wrap{
        top: 80px;
        right: 0;
    }
    
    .mobile #celek .b3-lower-middle-text p{
        font: 14px vag;
        margin-top: 10px;
        margin-bottom: 0px;
    }
    
    .mobile #celek .b3-lower-middle-icons{
        width: 50%;
        position: relative;
    }
    
    .mobile #celek .b3-lower-middle-icons img{
        width: 60%;
        top: 90px;
    }
    
    .mobile #celek .b3-lower-right img{
        width: 90%;
        top: 30px
    }

}

/* b3 ZOBRAZENÍ PRO MOBILY */

@media screen and (max-width:749px){
    .mobile #celek .b3{
        flex-direction: column;
        margin-top: -5px;
        background-color: #F9B606;
        background-image: url(https://i.alza.cz/Foto/LegendFoto/EN/Files/sablona/pedigree/images/b3-pozadi.png);
        background-size: 180%;      
        height: 60vw;  
    }

    .mobile #celek .b3-upper {
        margin-top: -20px;
    }

    .mobile #celek .b3-upper h3{
        font: 6vw vag;
        padding-bottom: 0px !important;
        margin-bottom: 10px;
        margin-top: 0;
        color: black;
        text-align: center;
        margin-top: 10px; 
    }

    .mobile #celek .b3-lower{
        display: flex;
        flex-direction: row;
        padding: 10px 0 10px 0;
    }

    .mobile #celek .b3-lower-left{
        display: none;
    }

    .mobile #celek .b3-lower-middle{
        width: 15%;
        position: relative;
    }

    .b3-lower-middle-icons {
        width: 100%;
    }

    .mobile #celek .b3-lower-middle-text{
        display: none;
    }

    .mobile #celek .b3-lower-middle-icons{
        width: 100%;
    }

    .mobile #celek .b3-lower-middle-icons img{
        width: 90%;
        position: absolute;
        top: 90px;
        right: 5%;
    }

    .mobile #celek .b3-lower-right{
        width: 85%;
    }

    .mobile #celek .b3-lower-right img{
        width: 95%;
        margin-top: -10%;
    }
}

/************************* B4 ***********************************************************/

/* B4 ZOBRAZENÍ PRO TŘI I ČTYŘI SLOUPCE*/

    #celek .b4{
        background-image: url(https://i.alza.cz/Foto/LegendFoto/EN/Files/sablona/pedigree/images/b4-pozadi.png);
        background-size: 100% auto;
        height: auto;
        display: flex;
        margin-top: 15px;
        
    }

    .layout-1 #celek .b4{
        height: 380px;
    }

    .layout-0 #celek .b4{
        height: 300px;
    }


    #celek .b4-left{
        width: 40%;
        position: relative;
    }

    #celek .b4-left img{
        width: 110%;
        position: absolute;
        bottom: 0;
        right: -18%;
        padding: 0 0 0 0;
    }

    #celek .b4-right{
        width: 60%;
        position: relative;
    }

    #celek .b4-right img{
        width: 96%;
        position: absolute;
        right: 0;
        bottom: 0;
    }


/* B4 ZOBRAZENÍ PRO TABLETY */

@media screen and (max-width:919px) and (min-width:749px){
    .mobile #celek .b4{
        height: 33vw;
    }
}

/* B4 ZOBRAZENÍ PRO TŘI I ČTYŘI SLOUPCE*/

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

    #celek .b4{
        height: auto;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        background-image: linear-gradient(to bottom, #F9B606, #FBCD67, #F9B606);
    }

    #celek .b4-left{
        width: 100%;
        text-align: center;
        padding: 20px 0 20px 0;
    }

    #celek .b4-left img{
        width: 90%;
        position: relative;
        right: 0;
    }

    #celek .b4-right{
        width: 100%;
        text-align: center;
    }

    #celek .b4-right img{
        width: 90%;
        margin-bottom: -5px;
        position: relative;
        
    }
}

/************************* B5 ***********************************************************/

/* B4 ZOBRAZENÍ PRO TŘI I ČTYŘI SLOUPCE*/

    #celek .b5{
        display: flex;
        position: relative;
        height: auto;
        padding-top: 20px;
    }

    #celek .b5-bck{  
        width: 100%;
    }

    #celek .b5-bck img{
        width: 100%;
    }

    #celek .b5-text{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8%;  
    }

    .layout-1 #celek .b5-text h2{
        text-align: center;
        font: 45px vag;
        color: black;
    }

    .layout-0 #celek .b5-text h2{
        text-align: center;
        font: 36px vag;
        color: black;
    }

    #celek .b5-packs{
        position: absolute;
        bottom: 2%;
        right: 2%;
        text-align: right;
    }

    .layout-1 #celek .b5-packs img{
        width: 95%;
        margin-right: 10%;
    }

    .layout-0 #celek .b5-packs img{
        width: 75%;
    }

@media screen and (max-width:919px) and (min-width:749px){

    #celek .b5-text h2{
        text-align: center;
        font: 4vw vag;
        color: black;
    }

    #celek .b5-packs img{
        width: 25vw;
    }
}

/* B4 ZOBRAZENÍ PRO TŘI I ČTYŘI SLOUPCE*/

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

    #celek .b5{
        display: flex;
        flex-direction: column;
        position: relative;
        height: auto;
        overflow: hidden;
        background-color: white;
    }

    #celek .b5-bck{  
        width: 100%;
        display: none;
        position: relative;
    }

    #celek .b5-text{
        position: relative;
    }

    #celek .b5-text h2{
        text-align: center;
        font: 10vw vag;
        color: black;
        margin-top: 10px;
    }

    #celek .b5-packs{
        background: linear-gradient(0deg, #F9B606 60%, #ffff 0%);
        text-align: center;
        width: 100%;
        height: auto;
        position: relative;
    }

    #celek .b5-packs img{
        width: 60vw;
        position: relative;
    }
}