﻿#Redemption { background-color:var(--color4); padding-bottom:3rem; }
#Redemption h1{ text-align:center; color:var(--color10); margin-bottom:0; padding-bottom:0; }
#Redemption .h1small{ text-align:center; color:var(--color10); font-size:1.4rem; font-weight:500; font-family:var(--font-title); }
#Redemption .lift { transition: transform .2s; }
#Redemption .lift:hover{ transform: scale(1.1); }
#Redemption .box .item { margin-bottom:1rem; }
#Redemption .box .item .ico{ font-size:2.6rem; display:inline-block; width:80px;line-height:1; text-align:center; color:var(--color3); }
#Redemption .box .item .txt{ text-align:center; color:var(--color3); font-family:var(--font-title); font-weight:400; font-size:1.4rem;  }
#Redemption .box.b1 { background-color:var(--color3); padding:3rem 0; display:table; width:100%; margin-top:3rem;
                      
}
#Redemption .box.b1 .content{ max-width:1200px; position:relative; margin:0 auto;  }
#Redemption .box.b1 .buser { background-color:var(--color10); max-width:500px; padding:60px; position:relative; z-index:4; margin:auto;
                             -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
}
#Redemption .box.b1 .buser h2{ margin:0 0 1em 0; padding:0; text-transform:none; }
#Redemption .box.b1 .img { position:absolute; height:100%; top:0; width:40%; background-size:100%; background-position:center center; background-repeat:no-repeat; }
#Redemption .box.b1 .img.right { background-image:url(/Images/odmena-small.jpg); right:0; }
#Redemption .box.b1 .img.left { background-image:url(/Images/sluzby-odhad-small.jpg); left:0; }

#Redemption .boxes{ display:flex; flex-wrap:wrap; justify-content:center; margin:2rem 0; }
#Redemption .boxes .item{ width:250px; padding:30px; margin:30px 15px 0 15px; background-color:var(--color10);
                          transition: transform .2s;
}
#Redemption .box.b2 { background-color:var(--color11); color:var(--color10); padding:3rem 0; display:table; width:100%;
                      
}
#Redemption .box.b2 p{ color:var(--color10); max-width:1000px; font-size:1.6rem; font-family:var(--font-title); font-weight:500; text-align:center; margin:auto; }
#Redemption .boxes .item:hover{ transform: scale(1.1); }
#Redemption .boxes .item .ico{ width:100%; font-size:3rem; line-height:1; text-align:center; color:var(--color3); }
#Redemption .boxes .item .title{ font-family:var(--font-title); font-weight:500; text-align:center; margin:1rem 0; font-size:1.8rem; color:var(--color3); }
#Redemption .boxes .item .desc{ text-align:center; }
#Redemption .button{ margin:30px auto; display:table; padding:0 30px; width:auto; }

@media all and (max-width: 61em) {
    #Redemption .box.b1 .buser { padding:30px; max-width:400px; }
    #Redemption .box .item .ico { font-size:2rem; }
    #Redemption .box .item .txt { font-size:1.2rem; }
}
@media all and (max-width: 48em) {
    #Redemption .boxes .item { width: calc(100% - 30px); }    
}
@media all and (max-width: 42em) {
    #Redemption .box.b1 .img.left,#Redemption .box.b1 .img.right { display:none; }
}

@media all and (max-width: 27em) {
    #Redemption .box.b1 .item { display:flex; flex-wrap:nowrap; }
    #Redemption .box.b1 .item .ico { font-size:1.6rem; width:45px; display:inline-block; }
    #Redemption .box.b1 .item .txt { font-size:1rem; text-align:left; }
    #Redemption .boxes .item .title { font-size:1.4rem; }
}



