﻿#Reward { background-color:var(--color4); padding-bottom:3rem; }
#Reward p,#Reward table,#Reward td,#Reward li,#Reward h1,#Reward h2,#Reward h3{  }
#Reward h1{ text-align:center; color:var(--color10); margin-bottom:3rem; }
#Reward .row { display:table; width:100%; }
#Reward .box { max-width:800px; margin:3rem auto; position:relative; }
#Reward .box .buser{ position:relative; z-index:4; background-color:var(--color10);
                     -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);
padding:60px;
line-height:1.8;
}
#Reward .box .buser h2 { margin-top:0; padding-top:0; text-transform:none; }
#Reward .box .buser h3 { margin:30px 0; }
#Reward .box .buser { transition: transform .2s; }
#Reward .box .lift:hover { transform: scale(1.1); }
#Reward .box .img { position:absolute; height:100%; top:0; width:50%; background-size:100%; background-position:center center; background-repeat:no-repeat; }

#Reward .box.b1 .buser,#Reward .box.b3 .buser { width:50%; }
#Reward .box.b1 .buser { margin-left:0; margin-right:auto; }
#Reward .box.b3 .buser { margin-right:0; margin-left:auto; }
#Reward .box.b1 .img { background-image:url(/Images/odmena-small.jpg); right:0; }
#Reward .box.b3 .img { background-image:url(/Images/sluzby-odhad-small.jpg); left:0; }

#Calculator { }
#Calculator h2{ text-align:center; color:var(--color10); }
#Calculator .content { max-width:1400px; margin:3rem auto; }
#Calculator .calcheader, #Calculator .buttons a.active, #Calculator .calcresult { background-color:var(--color3); color:var(--color10); text-align:center; }
#Calculator .calcheader { padding:2rem 0; font-size:2rem; font-family:var(--font-title); font-weight:300; }
#Calculator .buttons { display:flex; width:100%; flex-wrap:nowrap; }
#Calculator .buttons a { background-color:var(--color9); color:var(--color11); font-size:1.4rem; font-weight:500; font-family:var(--font-body); text-decoration:none; text-align:center;
                         width:calc(20% - 20px); margin:20px 10px; padding:20px 0; }
#Calculator .buttons a:first-child { margin-left:0;width:calc(20% - 10px); }
#Calculator .buttons a:last-child { margin-right:0;width:calc(20% - 10px); }

#Calculator .calcresult { padding:2rem 0; font-size:1.6rem; font-family:var(--font-title); font-weight:300; }
    #Calculator .calcresult .title { display:block; text-align:center; }
    #Calculator .calcresult .result { display:block; text-align:center; font-weight:500; font-size:2rem; }

    

@media all and (max-width:54em) {
    #Calculator { font-size:1rem; }
    #Calculator .calcheader { font-size:160%; }
    #Calculator .buttons a { font-size:120%; }
    #Calculator .calcresult { font-size:160%; }
    #Calculator .calcresult .result { font-size:120%; }
}

@media all and (max-width:54em) {
    #Calculator { font-size: 1rem; }
}
@media all and (max-width:42em) {
    #Calculator .buttons { flex-wrap:wrap; }
    #Calculator .buttons a:first-child,#Calculator .buttons a { width:calc(100% - 30px); margin:1rem 15px 0 15px; }
    #Calculator .buttons a:last-child { margin-bottom:15px; width:calc(100% - 30px); }
    #Reward .box.b1 .img { display:none; }
    #Reward .box.b1 .buser, #Reward .box.b3 .buser { width:calc(100% - 120px); }
}
@media all and (max-width:42em) {
    #Reward .box .buser,#Reward .box.b1 .buser, #Reward .box.b3 .buser { padding:15px; width:calc(100% - 30px); }
}


